Hi i have a webpage where i have two types of menus 1)top menu (horizontal) 2)left menu (vertical) like this
Home Portfolio Help Contact styles
<div id="menu1">
<ul class="tabs">
<li><h4><a href="#">In the blog »</a></h4></li>
<li class="hasmore"><a href="#"><span>Recent</span></a>
<ul class="dropdown">
<li><a>Menu item 1</a></li>
<li><a href="#" >Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li class="last"><a href="#">Menu item 6</a></li>
</ul>
</li>
<li class="hasmore"><a href="#"><span>Topics</span></a>
<ul class="dropdown">
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
<li><a href="#">Topic 3</a></li>
<li class="last"><a href="#">Topic 4</a></li>
</ul>
</li>
<li><h4><a href="#">Elsewhere »</a></h4></li>
<li><a href="#"><span>About</span></a></li>
<li class="hasmore"><a href="#"><span>Networks</span></a>
<ul class="dropdown">
<li><a href="#">Twitter</a></li>
<li><a href="#">posterous</a></li>
<li><a href="#">SpeakerSite</a></li>
<li><a href="#">LinkedIn</a></li>
<li class="last"><a href="#">See more…</a></li>
</ul>
</li>
<li><a href="#"><span>Bookmarks</span></a></li>
in the same way i have vertical which has a tab called styles,in both the styles tab i have
styles
style-1
style-2
style-3
style-3
Now my work is to when ever i want to change the style of menus dynamically i will go to style tab select the style and the style of the menus should be changed....
i dont know where to start ..please can any one help me with this or provide with example code will be gratefull to them
Create two classes in stylesheet, one if the menu is vertical and one if the menu is horizontal. On clicking on an option in styles tab change the css class of menu div using jquery.
Check This
use jQuery selectors for this purpose
like onmouseover event you can execute
function f()
{
$('#ms').removeCss("mass");
$('#ms').addCss("mass2");
}
your code could be
<li id="ms" class="mass" onmouseover="f();"><a href="#"><span>Networks</span></a>
<ul class="dropdown">
<li><a href="#">Twitter</a></li>
<li><a href="#">posterous</a></li>
<li><a href="#">SpeakerSite</a></li>
<li><a href="#">LinkedIn</a></li>
<li class="last"><a href="#">See more…</a></li>
</ul>
</li>
IIRC, someone did this for you on the SO javascript chat already.
Here is the link: http://jsfiddle.net/NUaA5/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.