SYSK 339: Menus and Other Popups Without Any JavaScript


The other day I came across the following article by Eric Meyer — http://meyerweb.com/eric/css/edge/popups/demo.html. 


 


Basically, instead of using JavaScript, you use CSS to change an element style that results in some other element(s) appearing (e.g. submenu when user hovers over the top menu item).


 


Below is a simple example that demonstrates this concept:


 



  1.  Use a <span> within another element such as <ul> or <a href>

 


    <a href=”Default.aspx”>Some link…


        <span>Additional information</span>


    </a>       


    <a href=”Default.aspx”>Another link…


        <span>More info here</span>


    </a>


 



  1. Style it such that the <span> is invisible until user hovers over the parent <a href>

 


<style type=”text/css”>


<!


    a { display: block; }


    a span {display: none; }


    a:hover > span {display: block; position: absolute; top: 100px; left: 10px; text-decoration: none; color: black; }


–>


</style>


 


 


Note: make sure to give absolute positionning to the span during the hover event to position it as desired rather than right after the link.


 


Also, in the real application, you would, of course, give the parent <div> a name and apply the styling for that div rather than all spans; e.g.


div#secondaryNav a span { display: none; }


 


 


Excellent idea, Eric!


 


 

Comments (3)

  1. I just stumbled over this post where you credit Eric Meyer for anchor pop ups.

    This is an idea much older.

    I use it on my website for years as so called "Info Box". It was in times of IE6 (still not over) the only possibility to imitate a standards compliant rollover for all browsers and platforms without any scripting.

    Unfortunately, even IE7 does not support pseudo class :hover on <div>’s. So I will use it still longer (till IE8?).

    BTW, I think it’s simpler to assign a class to the anchor tag <a> where the <span> is nested into. Then, <a class="info">hover over<span>pop this up</span><a/> does the trick everywhere on your site.

    I’m not the inventor of this, too. I optimized a similar idea found elsewhere on the web for my needs.