Beautiful red vertical glide navigation menu jquery plugin

Beautiful red vertical glide navigation menu jquery plugin

Want to add a tone of the colour RED in your website? This plugin enables us to do the above. This plugin features a menu bar coloured red when it is highlighted. Selection is done by hovering the mouse pointer over the menu items. The menu items that have sub menus are indicated by a arrow head in the side. These sub menus appear when the mouse pointer is hovered over the menus. The outline of the menu box is red in colour whereas the text color and the background color, when not selected, is white. This is an interesting feature if red is your colour.

Installation

Step1:include css and js files.

[javascript language="css"]<link href="css/webwidget_menu_vertical_menu1.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/webwidget_menu_vertical_menu1.js"></script>[/javascript]

Step2:create html tag.

[javascript language="css"]<div class="webwidget_menu_vertical_menu1">
<ul>
<li class="top_border"></li>
<li class="current"><a href="#">Menu1</a>
<ul>
<li class="top_border"></li>
<li><a href="#">submenu1</a>
</li>
<li><h3>Category</h3></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
<li class="bottom_border"></li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul>
<li class="top_border"></li>
<li><a href="#">submenu1</a>
</li>
<li><a href="#">submenu2</a></li>
<li><h3>Category</h3></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
<li class="bottom_border"></li>
</ul>
</li>
<li><a href="#">Menu3</a></li>
<li><h3>Category</h3></li>
<li><a href="#">Menu4</a>
<ul>
<li class="top_border"></li>
<li><a href="#">submenu1</a>
</li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
<li class="bottom_border"></li>
</ul></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a>
</li>
<li class="bottom_border"></li>
</ul>
</div>[/javascript]

Step3:add start script.

[javascript language="css"]<script language="javascript" type="text/javascript">
$(function() {
$(".webwidget_menu_vertical_menu1").webwidget_menu_vertical_menu1({
style_color: ‘red’,
font_color: ‘#666′,
font_decoration: ‘none’,//none blink inherit line-through overline underline
animation_speed: ‘normal’,//"slow", "normal", or "fast"
directory: ‘images’
});
});
</script>[/javascript]

For further Documentation of this script please follow the link mentioned below:

http://www.htmldrive.net/items/show/58/Beautiful-red-vertical-glide-navigation-menu-jquery-plugin.html

To download this code, click the link mentioned below:

http://www.htmldrive.net/items/download/58

To view an example of the script, visit the link mentioned here:

http://www.htmldrive.net/items/demo/58/Beautiful-red-vertical-glide-navigation-menu-jquery-plugin

To get the version of the script integrated within a live template visit the website whose link is mentioned here: Boxedart.com

Interested? Want to keep yourselves updated with the latest JavaScripts and codes? Try this website a1javascripts.com for more jQuery, CSS and HTML5 techniques.

JQuery is a very powerful tool, the more you learn about, more will you be amazed what it is capable of. Stay with us for lot of upcoming articles, Guidelines with plenty of great tutorials, Resources, etc.

Comments are closed