How to change the style of menus dynamically using jquery/javascript?

Question

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 &raquo;</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 &raquo;</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&hellip;</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

score 0 · Answer 1 · edited May 23 '17 at 10:08

0

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

edited May 23 '17 at 10:08

Community

1
1

answered Mar 21 '12 at 06:53

Ansh

357
1
2
13

score 0 · Answer 2 · answered Mar 21 '12 at 06:58

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&hellip;</a></li>
    </ul>
</li>

score 0 · Answer 3 · answered Mar 21 '12 at 07:48

0

IIRC, someone did this for you on the SO javascript chat already.

Here is the link: http://jsfiddle.net/NUaA5/

answered Mar 21 '12 at 07:48

Florian Margaine

58,730
15
91
116

How to change the style of menus dynamically using jquery/javascript?

3 Answers3