javascript - How can I change the styles of my menu on click? -


how can change style of active menu/submenu selected user? when click submenu, want submenu , parent menu have different style (like hover, permanent).

/*jquery time*/  $(document).ready(function(){  	$("#accordian h3").click(function(){  		//slide link lists  		$("#accordian ul ul").slideup();  		//slide down link list below h3 clicked - if closed  		if(!$(this).next().is(":visible"))  		{  			$(this).next().slidedown();  		}  	})  })
/*custom font text*/  @import url(http://fonts.googleapis.com/css?family=nunito);  /*css file fontawesome - iconfont using. css file imported contains font-face declaration. more info: http://fortawesome.github.io/font-awesome/ */  @import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);    /*basic reset*/  * {margin: 0; padding: 0;}    body {  	background: #4eb889;  	font-family: nunito, arial, verdana;  }  #accordian {  	background: #004050;  	width: 250px;  	margin: 100px auto 0 auto;  	color: white;  	/*some cool shadow , glow effect*/  	box-shadow:   		0 5px 15px 1px rgba(0, 0, 0, 0.6),   		0 0 200px 1px rgba(255, 255, 255, 0.5);  }  /*heading styles*/  #accordian h3 {  	font-size: 12px;  	line-height: 34px;  	padding: 0 10px;  	cursor: pointer;  	/*fallback browsers not supporting gradients*/  	background: #003040;   	background: linear-gradient(#003040, #002535);  }  /*heading hover effect*/  #accordian h3:hover {  	text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);  }  /*iconfont styles*/  #accordian h3 span {  	font-size: 16px;  	margin-right: 10px;  }  /*list items*/  #accordian li {  	list-style-type: none;  }  /*links*/  #accordian ul ul li {  	color: white;  	text-decoration: none;  	font-size: 11px;  	line-height: 27px;  	display: block;  	padding: 0 15px;  	/*transition smooth hover animation*/  	transition: 0.15s;  }  /*hover effect on links*/  #accordian ul ul li a:hover {  	background: #003545;  	border-left: 5px solid lightgreen;  }  /*lets hide non active lis default*/  #accordian ul ul {  	display: none;  }  #accordian li.active ul {  	display: block;  }
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js"></script>  <script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"></script>  <div id="accordian">  	<ul>  		<li>  			<h3><span class="icon-dashboard"></span>dashboard</h3>  			<ul>  				<li><a href="#">reports</a></li>  				<li><a href="#">search</a></li>  				<li><a href="#">graphs</a></li>  				<li><a href="#">settings</a></li>  			</ul>  		</li>  		<!-- keep li open default -->  		<li class="active">  			<h3><span class="icon-tasks"></span>tasks</h3>  			<ul>  				<li><a href="#">today's tasks</a></li>  				<li><a href="#">urgent</a></li>  				<li><a href="#">overdues</a></li>  				<li><a href="#">recurring</a></li>  				<li><a href="#">settings</a></li>  			</ul>  		</li>  		<li>  			<h3><span class="icon-calendar"></span>calendar</h3>  			<ul>  				<li><a href="#">current month</a></li>  				<li><a href="#">current week</a></li>  				<li><a href="#">previous month</a></li>  				<li><a href="#">previous week</a></li>  				<li><a href="#">next month</a></li>  				<li><a href="#">next week</a></li>  				<li><a href="#">team calendar</a></li>  				<li><a href="#">private calendar</a></li>  				<li><a href="#">settings</a></li>  			</ul>  		</li>  		<li>  			<h3><span class="icon-heart"></span>favourites</h3>  			<ul>  				<li><a href="#">global favs</a></li>  				<li><a href="#">my favs</a></li>  				<li><a href="#">team favs</a></li>  				<li><a href="#">settings</a></li>  			</ul>  		</li>  	</ul>  </div>

here jsfiddle.

just add javascript code:

$("#accordian h3").click(function(){       $('.active').removeclass('active');       $(this).addclass('active'); }); $('#accordian li a').click(function(){      $('.submenu-active').removeclass('submenu-active');      $(this).addclass('submenu-active'); });

and css:

.active{     text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);     color: red; /* note intentionally added red color illustrate better */ } .submenu-active{     background: #003545;     border-left: 5px solid lightgreen; }

try demo

explanation:

when click on menu item want remove .active class active item , set clicked item. same applied submenu item add .submenu-active class instead .active


Comments

Post a Comment

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

i'm trying link specific pdf page msoutlook'10 or msword'10, #page=... anchor particularly useful , works fine elsewhere. unfortunately when click [ctr-k] in outlook or winword, links re-formatted assuming unc path. pdf file located on shared drive. using "file:" prefix links open pdf in adobe reader (outside of browser), , "http:" open inside browser. issue seem need open in browser "file:" prefix in order anchor work. know anchors work inside browser. outlook uses windows/explorer default program (based on file extension) seems open in adobe reader neglecting anchor. is aware of solution, link specific page or bookmark of shared-pdf ms outlook and/or winword link? common references: mailermailer.com/...anchor-tags-html-emails campaignmonitor.com/...anchor-links-in-email-newsletters/ stackoverflow.com/...anchor-in-pdf-document
Read more

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

consider code: test = function() { } t = new test(); (var = 0; < 8; i++) { result = t instanceof test; } if change number of iterations 8 9 , loop take 100 times longer complete in latest version of firefox (41.0.1). tested on 2 different pcs , magic limit 8. here jsperf test used: http://jsperf.com/instanceof-8-times-vs-9-times does have idea why might happen? seems specific instanceof . not happen if else object, example check property. note: filed bugzilla bug this. jan de mooij mozilla team has posted details in bugzilla thread . here's simplistic interpretation of highly technical answers: in i < 8 case, firefox smart enough hoist result = t instanceof test; statement out of loop (according tests, doesn't seem omit altogether). in i < 9 case, apparently doesn't optimization . why? reason not clear, related fact 9 iterations threshold above function considered "hot" enough run through jit compiler. i < 8 cas...
Read more

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -

following this guide setup app on digital ocean droplet, not working. site not loading , it's throwing: "gateway time-out". the puma server works, since ps aux | grep puma prints: root 15878 0.0 0.4 376832 2168 ? sl 12:50 0:00 puma 2.13.4 (unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock) [20150930164940] root 15881 0.0 0.7 903676 3692 ? sl 12:50 0:06 puma: cluster worker 0: 15878 [20150930164940] root 24654 0.0 0.1 11748 916 pts/2 s+ 18:00 0:00 grep --color=auto puma my nginx config: user root; worker_processes 1; events { worker_connections 1024; } http { upstream puma { server unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock; } server { listen 80; server_name myapp.com; root /var/www/myapp/current/public; access_log /var/www/myapp/current/log/access.log; error_log /...
Read more