[HTML] Dropdown menu list (Mouse hover)

This tutorial will allow you to create a fancy drop-down menu list for your link in header.

--> Tutorials, tips and tricks <--
Dropdown menu list

1º - Javascript
Placement: All pages

Code:

[panda=js]    jQuery(document).ready(function(){
        jQuery("#prof-content").appendTo("a[href$='profile?mode=editprofile']");
        });

The part [ic]a[href$='profile?mode=editprofile'][/ic] means that drop-down menu will appear when you mouseover your Profile link in header, you can change it to whatever you want. [tip]For example, we will use the profile[/tip]


2º - CSS

Code:

  [panda=css]  #pun-navlinks li a {
        position: relative;
        }
       
        li:hover #prof-content {
        opacity: 1;
        visibility: visible;
        margin-top: -5px;
        }
       
        #prof-content {
        margin-top: 5px;
          margin-left: 1130%;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 29px;
        z-index: 999;
        background-color: #fff;
        padding: 5px;
        -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
        -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
        box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        }
       
        #prof-content a {
        display:block;
        width: 150px;
        text-align: left !important;
        margin-left: 5px;
        }

3º - Create New Widget
Location for widget [tip]ACP > Modules > Portal & Widgets > Forum Widget Management > Create New Widget[/tip]
After you created the widget in order to display links put the following code:

Code:

[panda=html]<div style="display:none"><div id="prof-content">
<a href="#LINK">Name for popup</a>
<a href="#LINK">Name for popup</a>
<a href="#LINK">Name for popup</a>
</div>
</div>

Don't forget to put permission that everyone can see the widget, also "use widget as table" check no.


4º - Preview

---

© PunBB Design

If you have any questions related to this topic create a topic with the following title: Dropdown menu list