Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Vertical Navigation Question WordPress

  • SOLVED

I built a tab menu on these pages

[[LINK href="http://temp.assessmd.com/assessments/"]][[/LINK]]

It consists of a shortcode tabbing function that is part of the Udesign template and then just references a specific menu.

I need to make it so it stays on the active link. I do not know how to get it to change to active li and stay blue (background shift)

The code is very poor, I inherited it, but I would love a clean set of code. I believe i need JS to make the active state stay, but I dont know.

Thanks,


2013-06-12 by Greg Ellett

Answers (5)

2013-06-12

isp_charlie answers:

try this:
style.css line 1635 change to
#navigation-menu ul.sf-menu > li > a > span {
display: block;
padding: 10px 0 10px 20px;
color: #999;
line-height: 20px;
}

line 1661 add more
#navigation-menu ul.sf-menu > li.current_page_ancestor > a,
#navigation-menu ul.sf-menu > li.current-menu-item > a,
#navigation-menu ul.sf-menu > li.current_page_item > a {
color: #6A6A6A;
text-decoration: none;
background: blue;
}

Greg Ellett comments:

sorry its for the vertical navigation on the left hand side (two tabs)

isp_charlie comments:

your code here, that work.
jQuery(function(){
jQuery("#menu-adult-assessments li a").each(function(){
var domain = document.domain;
href=window.location.href;
var str = href.replace(domain,"").replace("http://","");
if(str==jQuery(this).attr("href")+"/"){
jQuery(this).parent("li").addClass("current");
}
})
})

Greg Ellett comments:

perfect!

2013-06-12

Romel Apuya answers:

Can you provide link to the site?

Greg Ellett comments:

http://temp.assessmd.com/assessments/adult/master-test/

2013-06-12

Arnav Joy answers:

are you talking about the the menu at left side?

Greg Ellett comments:

yes

2013-06-12

Alfonso Abarca Alvarez answers:

Hi gmellett !

i did this exmple:


<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<style>
.normal{
background:#fff;
color:#000;
}
.current{
background:#000;
color:#fff;
}
</style>

</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">About</a></li>
</ul>


<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery-2.0.min.js">\x3C/script>')</script>

<script type="text/javascript">
$("#menu li a").click(function() {
$('#menu li a').removeClass("current");
$(this).addClass("current");
});
</script>
</body>
</html>



Alfonso Abarca Alvarez comments:

I can help you, only need to see your code

Alfonso Abarca Alvarez comments:

please try my code and rate

2013-06-12

Expert answers:

Seems like you have a class 'active' already defined in CSS.

This works perfectly. :) Just paste it in a js file that loads in front-end pages

jQuery(function(){

jQuery('.tab-content .nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
var pageurl = window.location.pathname;
if (pageurl.indexOf(href) >= 0) {
jQuery(this).addClass('active current-item');
jQuery(this).find('a').addClass('current-url');
}
});

});