cclloyd9785 Posted October 16, 2011 Share Posted October 16, 2011 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 More sharing options...
Ingolme Posted October 16, 2011 Share Posted October 16, 2011 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 More sharing options...
dsonesuk Posted October 16, 2011 Share Posted October 16, 2011 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. Link to comment Share on other sites More sharing options...
cclloyd9785 Posted October 16, 2011 Author Share Posted October 16, 2011 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 More sharing options...
dsonesuk Posted October 16, 2011 Share Posted October 16, 2011 The problem with using :active is that different browsers give different results for this :active state, thats why its best to use a id or class instead so it produce the same result in all browsers. Link to comment Share on other sites More sharing options...
cclloyd9785 Posted October 16, 2011 Author Share Posted October 16, 2011 But isn't :active just the mousedown state? I tested it in other browsers, and it was fine... Link to comment Share on other sites More sharing options...
dsonesuk Posted October 16, 2011 Share Posted October 16, 2011 :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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.