javascript - change menu background color on selected -
i need change selected sub menu background color. but, dont know how change background color, when click submenu.
jsfiddle: http://jsfiddle.net/bjq6y/
my css code :
.menucontent { background-image:url("../images/new.png"); border:1px solid #c7c7c7; bottom: 0px; position: fixed; width:100%; margin: 0 auto; text-align: center; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-box-shadow: 3px -3px 5px #b8b8b8; -webkit-box-shadow: 3px -3px 5px #b8b8b8; box-shadow: 3px -3px 5px #b8b8b8; } .menucontent a.slider { background-color:#fff; background-image: -moz-linear-gradient(center top, #ddd, #fff); background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#fff)); border: 1px solid #c7c7c7; border-bottom:none; cursor: pointer; float:right; height: 8px; margin:-15px 30px 0 0; padding:3px 20px; width: 8px; z-index: 2001; -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-box-shadow: 3px -2px 3px #b8b8b8; -webkit-box-shadow: 3px -2px 3px #b8b8b8; box-shadow: 3px -2px 3px #b8b8b8; } .menucontent a.slider img { padding-bottom: 3px; } #nav { list-style: none; padding: 0px; margin: 0px; } #nav li { display: inline-block; background: #222; } #nav li { color:#858585; font-weight: bold; display: block; padding: 15px 25px; text-align:center; text-decoration:none; width: auto; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; text-transform:uppercase; min-width: 125px; } #nav li li { padding: 10px 5px; text-align: left; } #nav li li li { padding: 7px 5px; text-align: left; } #nav li ul { background: #333; margin: 0px; padding: 0px; } #nav li a:hover, #nav li a.active, #nav li a.sel { background-color:#fff; color: #222; } #nav li ul { display:none; } #nav li ul li { background: #ccc; } #nav li ul li ul{ background: #222; } #nav li ul li li { background: #600; } #nav li ul li { margin: 5px 0; display: block; } #nav li img { border-width: 0px; margin-right: 8px; vertical-align: middle; } #nav ul li img { background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; vertical-align:middle; width:16px; } #nav li ul li { border-bottom: 1px solid #ccc; } #nav li li ul { margin-left: 25px; } my html clde
<!doctype html> <html lang="en" > <head> <meta charset="utf-8" /> <title>bharatanatyam</title> <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script> $(function(){ $('.slider').click(function () { $('#nav').slidetoggle(300); var img = $(this).find('img'); if ($(img).attr('id') == 'bot') { $(img).attr('src', 'images/arrow_top.png'); $(img).attr('id', 'top'); } else { $(img).attr('src', 'images/arrow_bottom.png'); $(img).attr('id', 'bot'); } }); $('.sub').click(function () { var cur = $(this).prev(); $('#nav li ul').each(function() { if ($(this)[0] != $(cur)[0]) $(this).slideup(300); }); $(cur).slidetoggle(300); }); $('.sub_menu').click(function () { var cur = $(this).prev(); $('#nav li li ul').each(function() { if ($(this)[0] != $(cur)[0]) $(this).slideup(300); //$(this).css("background", "red"); }); $(cur).slidetoggle(300); }); }); </script> </head> <body> <div class="menucontent"> <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a> <ul id="nav"> <li> <ul id="1"> <li> <ul id="2"> <li><a href="#">profile</a></li> <li><a href="#">presentations</a></li> <li><a href="#">recitals</a></li> <li><a href="#">awards</a></li> <li><a href="#">gallery</a></li> <li><a href="#">media</a></li> <li><a href="#">calendar</a></li> <li><a href="#">downloads</a></li> </ul> <a href="#" class="sub_menu">bharatanatyam</a></li> <li> <ul id="3"> <li><a href="#">profile</a></li> <li><a href="#">presentations</a></li> <li><a href="#">recitals</a></li> <li><a href="#">awards</a></li> <li><a href="#">gallery</a></li> <li><a href="#">media</a></li> <li><a href="#">calendar</a></li> <li><a href="#">downloads</a></li> </ul> <a href="#" class="sub_menu">kuchipudi</a></li> </ul> <a href="#" class="sub sel" tabindex="1">sailaja</a> </li> <li> <ul id="4"> <li><a href="#">about sailasudha</a></li> <li><a href="#">admission</a></li> <li><a href="#">presentation</a></li> <li><a href="#">recticals</a></li> <li><a href="#">gallery</a></li> <li><a href="#">media</a></li> <li><a href="#">calendar</a></li> <li><a href="#">downloads</a></li> </ul> <a href="#" class="sub" tabindex="1">sailasudha</a> </li> <li> <ul id="5"> <li><a href="#">philosophy</a></li> <li> <ul id="6"> <li><a href="#">artist</a></li> <li><a href="#">gallery</a></li> <li><a href="#">media</a></li> </ul> <a href="#" class="sub_menu" >year 1</a></li> <li><ul id="7"> <li><a href="#">artist</a></li> <li><a href="#">gallery</a></li> <li><a href="#">media</a></li> </ul><a href="#" class="sub_menu" >year 2</a></li> <li><ul id="8"> <li><a href="#">artist</a></li> <li><a href="#">gallery</a></li> <li><a href="#">media</a></li> </ul><a href="#" class="sub_menu" >year 3</a></li> <li><ul id="9"> <li><a href="#">artist</a></li> <li><a href="#">gallery</a></li> <li><a href="#">media</a></li> </ul><a href="#" class="sub_menu" >year 4</a></li> <li><ul id="10"> <li><a href="#">artist</a></li> <li><a href="#">gallery</a></li> <li><a href="#">media</a></li> </ul><a href="#" class="sub_menu" >year 5</a></li> <li><a href="#">artist</a></li> <li><a href="#">gallery</a></li> <li><a href="#">media</a></li> </ul> <a href="#" class="sub" tabindex="1">nrityanasangama</a> </li> <li><a href="#">contact us</a></li> </ul> </div> </body> </html> my doubt :
when click "kuchipudi" menu, sub menu open. time "kuchipudi" background change selected menu.
when click "bharatanatyam" menu, sub menu open. time "kuchipudi" background change , "bharatanatyam" background color change selected menu. dont know how change, background color change.
would edit fiddle work:
$('.sub_menu').click(function () { $('a.submenu').removeclass('selected'); $(this).addclass('selected'); var cur = $(this).prev(); $('#nav li li ul').each(function() { if ($(this)[0] != $(cur)[0]) $(this).slideup(300); }); $(cur).slidetoggle(300); ); then add css:
.selected{background-color:#eee; //or whatever colour
Comments
Post a Comment