SYSK 339: Menus and Other Popups Without Any JavaScript

  • Article

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!