Simple Drop Downs   by Adam Schwartz


About     Usage     Examples      Under the Hood     Known Issues     Revisions



SDD has reached version 1! If you'd like the previous release, v0.4, please visit the legacy site.


[ back to top ]

About

This a super-lightweight (2.75kb, 2.34kb minified) javascript class for creating awesome dropdown menus.



[ back to top ]

Usage

Download: simpledropdowns.js (2.75kb) or simpledropdowns-min.js (2.34kb).


Place the following code in your document's head element:

  1. <script type="text/javascript" src="simpledropdowns.js"></script>  

Use optional styling:

  1. <style type="text/css">  
  2. .dropdownmenu {  
  3.     /* your custom styles */  
  4. }  
  5. </style>  

Now place the following code in the document's body to create a menu like this: MyMenu

  1. <span class="dropdown" title="divID">  
  2.     MyMenu  
  3. </span>  
  4. <div id="divID" style="display:none;">  
  5.     divID contents  
  6. </div>  


[ back to top ]

Examples


Example 1     Example 2     Example 3


[ back to examples ]

Example 1 - Simple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur. Etiam sit amet ante
elementum purus condimentum feugiat. MyMenu eget, risus. Nunc ac magna. Sed risus. Nunc eget nulla. Donec a neque. Donec sodales. Quisque faucibus euismod massa. Nam urna dui, lacinia sit amet, mattis vel, condimentum eget, sem. Proin ut turpis. In pharetra bibendum augue. Etiam facilisis, quam quis eleifend suscipit, est nisi scelerisque dui, sed vulputate magna arcu eu risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam purus. Fusce ante. Quisque auctor, arcu eu scelerisque tristique, est ipsum mollis ipsum, sed rhoncus lacus purus vel lorem. Mauris lorem eros, vulputate vitae, porttitor consequat, ultrices eu, massa.


This example's html.

  1. <span class="dropdown" title="divID">  
  2.     MyMenu  
  3. </span>  
  4. <div id="divID" style="display:none;">  
  5.     divID contents  
  6. </div>  


This example used no custom css.


[ back to examples ]

Example 2 - Simple onClick

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur. Etiam sit amet ante
elementum purus condimentum feugiat. Click Me eget, risus. Nunc ac magna. Sed risus. Nunc eget nulla. Donec a neque. Donec sodales. Quisque faucibus euismod massa. Nam urna dui, lacinia sit amet, mattis vel, condimentum eget, sem. Proin ut turpis. In pharetra bibendum augue. Etiam facilisis, quam quis eleifend suscipit, est nisi scelerisque dui, sed vulputate magna arcu eu risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam purus. Fusce ante. Quisque auctor, arcu eu scelerisque tristique, est ipsum mollis ipsum, sed rhoncus lacus purus vel lorem. Mauris lorem eros, vulputate vitae, porttitor consequat, ultrices eu, massa.


This example's html.

  1. <span class="dropdown click" title="divID2">  
  2.     Click Me  
  3. </span>  
  4. <div id="" style="display:none;">  
  5.     Click anywhere to make this go away   
  6. </div>  


This example used no custom css.


[ back to examples ]

Example 3 - Styled Menu / Javascript Actions

Sed feugiat. Etiam in turpis id lacus sodales venenatis. Fusce cursus, orci ac posuere molestie, urna ipsum volutpat turpis, id facilisis ligula leo eget augue. Phasellus metus ligula, rhoncus ut, ultricies
Cum sociis natoque penatibus et magnis Complicated Dropdown dis parturient montes, nascetur ridiculus mus. Cras nunc arcu, ultrices vitae, lacinia a, pretium at, ligula. Sed mi. In consequat tellus non nisl. Nullam neque. Donec at eros. Nulla facilisi. Vestibulum vel velit sed massa condimentum luctus. Nullam dignissim sollicitudin ipsum. Etiam bibendum quam quis pede. Phasellus vitae nisi. Curabitur bibendum facilisis felis. Donec quis urna.


This example's html.

  1. <span id="example2" class="dropdown" title="exampleMenu">  
  2.     Complicated Dropdown  
  3. </span>  
  4. <div id="exampleMenu" style="display:none;">  
  5.     <a onclick="alert(this);stop(event);">  
  6.         alert this element  
  7.     </a>  
  8.     <a onclick="this.innerHTML='changed';stop(event);">  
  9.         change me  
  10.     </a>  
  11.     <a onclick="this.innerHTML='changed (see the alert?)';
                    alert('foo');stop(event);"    >  
  12.         change my text and alert foo  
  13.     </a>  
  14.     <a onclick="this.style.background='#000';this.style.color='#fff';
                    this.innerHTML='i like white fonts';stop(event);"    >  
  15.         make me look cool  
  16.     </a>  
  17.     <a onclick="ajax('ajax.html',this);stop(event);">  
  18.         load ajax.html  
  19.     </a>  
  20. </div>  

This example's css.

  1. #example2 * {  
  2.     color:#3399ff;  
  3.     font-weight:bold;  
  4.     text-decoration:none;  
  5. }  
  6. #example2 span.dropdownmenu {  
  7.     background:#fff;  
  8.     border:1px solid #ccc;  
  9.     padding:0;  
  10.     rightright:0;  
  11.     width:210px;  
  12. }  
  13. #example2 span.dropdownmenu a {  
  14.     color:#000;  
  15.     display:block;  
  16.     font-weight:bold;  
  17.     padding:5px;  
  18.     text-decoration:none;  
  19. }  
  20. #example2 span.dropdownmenu a:hover {  
  21.     background:#eee;  
  22.     color:#3399ff;  
  23. }  


[ back to top ]

Under the Hood

Coming soon!




[ back to top ]

Known Issues




[ back to top ]

Revisions


© 2008 Adam Schwartz    |    Valid    HTML    CSS