Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[HTML] Dropdown menu list (Mouse hover)



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

avatar
Administrator
Administrator


Tutorial: Dropdown menu list

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



- 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]


- 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;
        }


- 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.


- Preview





© PunBB Design


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

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum