Jump to content

Cleaner Active Page Navbar State?


cclloyd9785
 Share

Recommended Posts

I have a messy way to make the navbar show that the current page is active - Have it something like body#page1 li#nav a.navleft It seems to be a lot of code, and was just wondering if there was a cleaner way to do it. I had to use a different class for each menu item, and a different ID for each one to recognize it's active. So is there any easy way to make it active? Preferably with css, but javascript is acceptable. Below is the CSS for the menu:

ul#navmenu {position:relative;top:-52px;left:-8px;z-index:998; }li#nav {list-style-type:none;list-style-image:none;display:inline-block;text-align:center;text-shadow:-1px -1px 0px rgba(0,0,0,.3);position:relative; left:-12px;margin-left:-2px;margin-right:-2px;width:102px; height:36px; }li#nav a.navleft, a.navright, a.navinv, a.navidex, a.navddex, a.navsafe {text-decoration:none;color:#e2e2e2;display:inline-block;float:left;width:102px;height:36px;line-height:36px; }li#nav a.navleft:hover,a.navleft:active,a.navinv:hover,a.navinv:active,a.navidex:hover,a.navidex:active,a.navddex:hover,a.navddex:active,a.navsafe:hover,a.navsafe:active,   a.navright:hover,a.navright:active {color:#fff;} /* Background Action State Images */li#nav a.navleft {background: url('/img/nav/global.png') 0px 0px no-repeat; }li#nav a.navleft:hover {background: url('/img/nav/global.png') 0px -72px no-repeat; }li#nav a.navleft:active {background: url('/img/nav/global.png') 0px -108px no-repeat; }li#nav a.navinv, a.navidex, a.navddex, a.navsafe {background: url('/img/nav/global.png') -102px 0px no-repeat; }li#nav a.navinv:hover, a.navidex:hover, a.navddex:hover, a.navsafe:hover {background: url('/img/nav/global.png') -102px -72px no-repeat; }li#nav a.navinv:active, a.navidex:active, a.navddex:active, a.navsafe:active {background: url('/img/nav/global.png') -102px -108px no-repeat; }li#nav a.navright {background: url('/img/nav/global.png') -205px 0px no-repeat; }li#nav a.navright:hover {background: url('/img/nav/global.png') -205px -72px no-repeat; }li#nav a.navright:active {background: url('/img/nav/global.png') -205px -108px no-repeat; } /* Active Page State */body#home li#nav a.navleft {background: url('/img/nav/global.png') -102px -144px no-repeat; border-radius:3px 0px 0px 3px}body#inv li#nav a.navinv {background: url('/img/nav/global.png') -102px -144px no-repeat; }body#idex li#nav a.navidex {background: url('/img/nav/global.png') -102px -144px no-repeat;}body#ddex li#nav a.navddex {background: url('/img/nav/global.png') -102px -144px no-repeat; }body#safe li#nav a.navsafe {background: url('/img/nav/global.png') -102px -144px no-repeat; }body#home li#nav a.navleft {color:#e2e2e2;}body#inv li#nav a.navinv {color:#e2e2e2;}body#idex li#nav a.navidex {color:#e2e2e2;}body#ddex li#nav a.navddex {color:#e2e2e2;}body#safe li#nav a.navsafe {color:#e2e2e2;}

Link to comment
Share on other sites

If you're using the same style on several selectors, just separate them with commas:

body#home li#nav a.navleft { border-radius:3px 0px 0px 3px }body#inv li#nav a.navinv, body#home li#nav a.navleft, body#idex li#nav a.navidex,body#ddex li#nav a.navddex, body#safe li#nav a.navsafe {  background: url('/img/nav/global.png') -102px -144px no-repeat;  color: #e2e2e2;}

Link to comment
Share on other sites

Wow! major head spin, Normally you would just assign a id or class depending on circumstance to the anchor element to identify as being the active link.

<div id="nav"><ul><li class="navleft"><a href="#Home">Home</a></li><li><a href="#About" id="active">About</a></li><li><a href="#Admissions">Admissions</a></li><li><a href="#Concact">Concact</a></li><li class="navright"><a href="#Workshops">Workshops</a></li></ul></div>

 #nav ul, #nav li{ margin:0; padding: 0; text-indent:0; list-style-type:none;}#nav {position:relative;top:-52px;left:-8px;z-index:998; }#nav li {list-style-type:none;list-style-image:none;display:inline-block;text-align:center;text-shadow:-1px -1px 0px rgba(0,0,0,.3);position:relative; left:-12px;margin-left:-2px;margin-right:-2px;width:102px; height:36px; }#nav li a{text-decoration:none;color:#e2e2e2;display:inline-block;float:left;width:102px;height:36px;line-height:36px; }#nav li a {background: url('/img/nav/global.png') -102px 0px no-repeat; }#nav li a:hover, #nav li a#active {color:#fff;}#nav li a:hover {background: url('/img/nav/global.png') -102px -72px no-repeat; }/*#nav li a#active {background: url('/img/nav/global.png') -102px -108px no-repeat; } this is not required I think*/#nav li.navleft a {background: url('/img/nav/global.png') 0px 0px no-repeat; }#nav li.navleft a:hover {background: url('/img/nav/global.png') 0px -72px no-repeat; }/* #nav li.navleft a#active {background: url('/img/nav/global.png') 0px -108px no-repeat; } this is not required I think*/#nav li.navright a {background: url('/img/nav/global.png') -205px 0px no-repeat; }#nav li.navright a:hover {background: url('/img/nav/global.png') -205px -72px no-repeat; }/*#nav li.navright a#active {background: url('/img/nav/global.png') -205px -108px no-repeat; }  this is not required I think*/  #nav li.navleft a#active {background: url('/img/nav/global.png') -102px -144px no-repeat; color:#e2e2e2;  border-radius:3px 0px 0px 3px; /*as this seems different*/} #nav a#active {background: url('/img/nav/global.png') -102px -144px no-repeat; color:#e2e2e2;} 

you seem to have two active styling one in /* Background Action State Images */ , and another in /* Active Page State */ the chance are slim i have this correct, as theres no html to go with it but this is how it normally would be set up.

Edited by dsonesuk
Link to comment
Share on other sites

Using both of your suggestions I was able to clean it up a good amount. HTML for head:

														<ul id="gn-ul">											 							<li id="gn-home"><a href="[url="http://cclloyd.zxq.net/"]/[/url]"><span>Home</span></a></li>											 							<li id="gn-inv"><a href="[url="http://cclloyd.zxq.net/inventory.php"]/inventory.php[/url]">Inventory</a></li>											 							<li id="gn-idex"><a href="[url="http://cclloyd.zxq.net/idex.php"]/idex.php[/url]"><i>iDex Info</i></a></li>											 							<li id="gn-ddex"><a href="[url="http://cclloyd.zxq.net/dreamdex.php"]/dreamdex.php[/url]"><s>DreamDex Info</s></a></li>											 							<li id="gn-safe"><a href="[url="http://cclloyd.zxq.net/safeguard.php"]/safeguard.php[/url]"><s>Safeguard</s></a></li>											 							<li id="gn-pm"><a href="[url="http://pokefarm.org/pmsend?to=cclloyd9785"]#[/url]" target="_blank" >PM me</a></li>											 							</ul>											

And CSS:

/* NAVIGATION MENU FUNCTION */ul#gn-ul {	position:relative;	top:-52px;	left:-8px;	z-index:998; }li#gn-home, li#gn-inv, li#gn-idex, li#gn-ddex, li#gn-safe, li#gn-pm {	list-style-type:none;	display:inline-block;	text-align:center;	position:relative; left:-12px;	margin-left:-2px;	margin-right:-2px; }li#gn-home a, li#gn-inv a, li#gn-idex a , li#gn-ddex a , li#gn-safe a, li#gn-pm a {	text-decoration:none;	color:#e2e2e2;	display:inline-block;	float:left;	width:102px;	height:36px;	line-height:36px; }li#gn-home a span, li#gn-inv a span, li#gn-idex a span , li#gn-ddex a span, li#gn-safe a span, li#gn-pm a span {	display:inline-block;	width:102px;	height:36px;	background-image: url('/svg_home.svg');	background-repeat: no-repeat; 	color:rgba(0,0,0,0); }	/* SVG Text */li#gn-home a span {background-position: center center }/* Background Action State Images */li#gn-home a, li#gn-inv a, li#gn-idex a, li#gn-ddex a, li#gn-safe a, li#gn-pm a {background-image: url('/img/nav/global.png'); }li#gn-home	a		 {background-position:	0px 0px; 	}li#gn-home	a:hover	 {background-position: 	0px -72px; 	}li#gn-home	a:active {background-position: 	0px -108px; }li#gn-inv a, li#gn-idex a, li#gn-ddex a, li#gn-safe a, li#gn-inv					{background-position: -102px 0px; 					}li#gn-inv a:hover, li#gn-idex a:hover, li#gn-ddex a:hover, li#gn-safe a:hover 		{background-position:	-102px -72px; 				}li#gn-inv a:active, li#gn-idex a:active, li#gn-ddex a:active, li#gn-safe a:active 	{background-position:	-102px -108px;				}li#gn-pm a 			{background-position:	-205px 0px; 	}li#gn-pm a:hover 	{background-position: 	-205px -72px;	}li#gn-pm a:active 	{background-position:	-205px -108px;	}/* Active Page States */body#home li#gn-home a {background-position: -102px -144px; border-radius:3px 0px 0px 3px; }body#inv li#gn-inv a, body#idex li#gn-idex a, body#ddex li#gn-ddex a, body#safe li#gn-safe a {background-position: -102px -144px }

Link to comment
Share on other sites

:active when used as when the link is about to be selected, yes it is fine, but in some browsers the active state remains until another link is chosen, while in some it loses its active state on loss of focus to another item, or when simply hovered over, this is when the problem occurs, and a id or class is used to force it to show a specific styling to represent that is on this current links page.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...