StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Simple show/hide with CSS

As the title says here's one way to have simple show and hide effect using just CSS and avoid JavaScript. Idea is to use some tag inside the link (for example bold, or span or what ever) which will hide it's content in normal state and show in hover state. Mostly it's used for creating interesting menu effects with some additional images.

So here's basic example code, and a few ideas where you can also use this, for example i've used it Gunmetal free WordPress Theme, you can see the demo here.

  1.  
  2. <ol id="nav">
  3. <li><a href="#"><b>»</b>Menu Item</a></li>
  4. <li><a href="#"><b>»</b>Menu Item</a></li>
  5. <li><a href="#"><b>»</b>Menu Item</a></li>
  6. ...
  7. </ol>
  8.  
  9. #nav a {
  10. display: block;
  11. margin: 0;
  12. border: none;
  13. }
  14. #nav a b {
  15. float: right;
  16. display: none;
  17. }
  18. #nav a:hover {
  19. background: none;
  20. border: none;
  21. text-decoration: none;
  22. }
  23. #nav a:hover b {
  24. display: inline;
  25. }
  26.  

As bold tag you can use what ever you want like span or italic... The thing I'm seeing a lot these days is like descriptive headline on menu hover. The idea is the same, you place some tag into your link with empty span that has background image and absolute position and show it on hover. Here's example code.

  1.  
  2. <ul id="menu">
  3. <li id="one"><a href="#"><span></span>Menu Item</a></li>
  4. <li id="two"><a href="#"><span></span>Menu Item</a></li>
  5. <li id="three"><a href="#"><span></span>Menu Item</a></li>
  6. ...
  7. </ul>
  8.  
  9. #menu span {
  10. display: none;
  11. position: absolute;
  12. }
  13.  
  14. #menu a:hover span {
  15. display: block;
  16. }
  17.  
  18. #one span {
  19. background: transparent url(one.gif) no-repeat scroll 0 0;
  20. height: 11px;
  21. width: 111px;
  22. left: 35px;
  23. top: -20px;
  24. ...
  25. }
  26.  
  27. #two span {
  28. background: transparent url(two.gif) no-repeat scroll 0 0;
  29. height: 222px;
  30. width: 22px;
  31. left: 15px;
  32. top: -10px;
  33. ...
  34. }
  35.  

And here are some ideas where you could also use this. For example to show that some link has target blank, so you give that link some id and do the same thing here for it with some descriptive icon. Have in mind that if you're using it inside some paragraph rest of text is going to move, so you could add padding on regular state and remove it on hover to fix it.

And here's another example, you can also use this to show a new menu like i am on every post title (those share icons) just i'm using a Javascript for it, didn't think if this when i was coding this ;) Have fun!

Leave a comment on Stylized Web Have some feedback? Leave a comment

37 Comments So Far

  1. pretty cool ! thanks dude

  2. Yes, good idea!

  3. Looking good, i would just like to see more examples…

  4. nice trick ;-)

  5. in feb this year i started this http://www.wscoop.com

    But I need your help….

    I need links to web design and development, site , articles links…… anything you think of….

    Please are you able to help me make this into a great resource for developers and designers.

  6. Pingback: homepage templates

  7. Pingback: no deposit required bingo games

  8. Pingback: cheap homeowners insurance quotes

  9. great article thanks

  10. Nice post, I must try this one for sure… keep it up buddy.

  11. Pingback: lowest price teen health online www triumph com corona ca

  12. Pingback: switch card pokeris

  13. This is good stuff, thank you very much indeed! BTW I really like the layout of this page :-)

  14. thanks! this was really helpful!

  15. Nice post, I must try this one for sure… keep it up buddy.

  16. dasdasdasdasdasdasd

  17. ssssssss

  18. can you show us the demo? i visit the demo being provided but i couldn’t find the sanple.

  19. %100 Doğal ve hiç bir yan etkisi olmayan Uzamax’ı keşfedin
    UZAMAX içeriğinde mineral ve vitaminler barındıran, doğal bitkielerden üretilmiş gıda desteğidir. İçeriğinde herhangi bir kimyasal ürün bulunmamakla birlikte tamamen doğal kurutulmuş bitkisel bir karışımdır. Sadece birkaç aylık kullanım kürü sonrasında bile uzamax’ın etkisini hissedeceksiniz.

    Uzamax kullanarak doğal yollarla bünyenize gerekli olan tüm besin, vitamin ve mineralleri vücudunuza almanızı sağlar.izlanda yosun hapı

  20. Nice, thanks for the code

  21. By Tech Aholic posted on May 18, 2011 at 9:32 pm

    Thanx for the nice idea.
    I have two different button state pictures, saved in one graphic. That is the cell background graphic. I’m using CSS so on hover, it changes the offset and displays the other state.
    How can I also hide and show other text, elsewhere on the page when that image is clicked? without using java script still

  22. kameralı sohbet burADA TIKLA sende

  23. Setting an element’s display to “none” requires the browser to re-render the element. A better approach is the following.

    .hide { position:absolute; left:-9999em }
    .show { position:static; left:0 }

  24. another post about CSS
    realy i should learn it

  25. By ying posted on August 29, 2011 at 10:51 am
  26. How can this be done when the user clicks, instead of hovers? Thanks.

  27. from a solid starting point. Basic is infact many templates in one using a single stylesheet. By adding/removing small snippets of code from the html, Basic can go from a fluid 3 column web template for a fixed

  28. wow amazing i love it ..perfect..

  29. Thanks for sharing this.
    I just needed it ;)

  30. Nice share I just found one more tutorial using CSS3 for toggle(hide or show) and NO JAVASCRIPT

    http://webstutorial.com/html5-css3-toggle-slideup-slidedown/html-5

  31. By priya posted on February 16, 2012 at 11:37 am

    its nice;thank u!!!!!!!!!!!!!!

  32. I just could not depart your website prior to suggesting that I really loved the usual information an individual provide to your visitors? Is going to be back incessantly to inspect new posts

  33. I’ve said that least 2765332 times. SCK was here

  34. I’m impressed, I have to admit. Rarely do I come across a blog that’s both equally educative and entertaining, and let me
    tell you, you’ve hit the nail on the head. The problem is something not enough men and women are speaking intelligently about. I’m very happy I
    stumbled across this in my search for something regarding this.

  35. Fantastic web site. Plenty of helpful information here. I’m sending it to some buddies ans also sharing in delicious. And obviously, thanks to your effort!

  36. Hi there, simply turned into alert to your weblog via Google, and located that it’s really informative. I’m gonna watch out for brussels. I’ll be grateful in case you proceed this in future. Numerous other people will likely be benefited out of your writing. Cheers!

  37. Nyt kannatta löytää itsellensä sse kaunis
    nainen, jota onn aina kaivannut. Hyppää kyytiin samantien ʝa löydä itsestäѕі se villimli puoli.
    Εlämäsi villein jɑ upein seikkailu odottaakin sinua lähempänä kuin koskaan.

    Feel free tօ surf tο my web pagе … seks chat odaları

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>