How you can see, this is a typical list with a div container (nav_wrap) used to apply the script and render the style. I added nav_wrap css class to give it a default style, but you can replace it with another class. "active_nav" is the name of the class for the selected menu, this class name can be changed in the options of Mootools class.
This is the version of my sample for an orizzontal menu.
/* NAVIGATION */ #nav_wrap { height: 60px; padding-top: 2em; background-image: url(../images/nav/nav_arrow.png); background-repeat: no-repeat; background-position: -100px 40px; } #nav_wrap_sub { height: 60px; padding-bottom: 2em; background-image: url(../images/nav/nav_arrow_bot_up.png); background-repeat: no-repeat; background-position: -100px -90px; } #nav { width: 100%; height: 60px; } #nav ul{ list-style-type: none; padding: 0; margin: 0; margin-left: 10px; width: 100%; height: auto; position: relative; } #nav ul li{ display: block; float: left; cursor: pointer; } #nav ul li a{ background-image: url(../images/nav/nav_l.png); background-repeat: no-repeat; background-position: left top; padding: 0px 0px 13px 15px; color: #333333; font-size: 1.2em; text-decoration: none; float:left; } #nav ul li a span{ background-image: url(../images/nav/nav_r.png); background-repeat: no-repeat; padding: 11px 20px 13px 5px; background-position: top right; float:left; cursor: pointer; } #nav ul li a:hover{ color: white; } #active_nav { padding-top: 2px; } #active_nav a{ background-image: url(../images/nav/nav_l_a.png) !important; } #active_nav a span{ background-image: url(../images/nav/nav_r_a.png) !important; padding-top: 18px; } #active_nav a:hover{ color: black !important; }
You can initialize the menu with the default class constructor. It's better to initialize the menu on 'domready' event of your document
// menu init window.addEvent('domready', function() { var myMenuSelector = new MenuSelector(); });
It's possibile to use different options to initialize the MenuSelector object, you can specify some option to change the id of container div or layout preferences.
var opt = { id : 'nav_wrap_sub', bg_position : '32px' } // menu init window.addEvent('domready', function() { var mySubMenuSelector = new MenuSelector(opt); });
The possible options are the follows :
id : container div's id active_id : active menu item's id bg_position : vertical offset position in px left_pad : left padding of the arrow duration : duration of Fx.Transitions.Elastic transition
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus