WordPress.org

1. underattackstore
   Member
   Posted 2 years ago #

   I have a menu

   <ul class="cssmenu">
   	<li class="home"><a href="<?php bloginfo('url'); ?>" class="selected" title="Home"><span class="displace">Home</span></a></li>
   
   	<li class="store"><a href="<?php bloginfo('url'); ?>/products-page/" title="Store"><span class="displace">Store</span></a>
   	</li>
   
   	<li class="cart"><a href="<?php bloginfo('url'); ?>" title="Cart"><span class="displace">Cart</span></a>
   
   	</li>
   	<li class="faq"><a href="<?php bloginfo('url'); ?>" title="FAQ"><span class="displace">FAQ</span></a>
   
   	</li>
   	<li class="contact"><a href="<?php bloginfo('url'); ?>" title="Contact"><span class="displace">Contact</span></a>
   
   	</li>
   </ul>

   I need that class="selected" to change for each individual page, so if im on the homepage, its on the home link, and the Store page, etc etc.

2. underattackstore
   Member
   Posted 2 years ago #

   css

   /*
   *	Setup
   */
   ul.cssmenu {
   	list-style: none;
       margin:5px 0;padding:0;
   	}
   
   .displace {
   	position: absolute;
   	left: -5000px;
   	}
   
   ul.cssmenu li {
   	float: left;
   	}
   
   ul.cssmenu li a {
   	display: block;
   	width: 44px;
   	height: 22px;
   	background: url(http://ua.tommedwards.com/wp/wp-content/themes/underattack/images/menu_sprite2.png);
   	}
   
   /*
   *	Normal Links
   */
   ul.cssmenu li.home a {
   	background-position: 0px 0px;
   	display: block;
   	width: 45px;
   	}
   
   ul.cssmenu li.store a {
   	background-position: -44px 0px;
   	display: block;
   	width: 50px;
   	}
   
   ul.cssmenu li.cart a {
   	background-position: -94px 0px;
   	display: block;
   	width: 42px;
   	}
   
   ul.cssmenu li.faq a {
   	background-position: -137px 0px;
   	display: block;
   	width: 36px;
   	}
   
   ul.cssmenu li.contact a {
   	background-position: -171px 0px;
   	display: block;
   	width: 64px;
   	}
   /*
   *	Hover Links
   */
   
   ul.cssmenu li.home a:hover {
   	background-position: 0px -44px;
   	}
   
   ul.cssmenu li.store a:hover {
   	background-position: -44px -44px;
   	}
   
   ul.cssmenu li.cart a:hover {
   	background-position: -94px -44px;
   	}
   
   ul.cssmenu li.faq a:hover {
   	background-position: -137px -44px;
   	}
   
   ul.cssmenu li.contact a:hover {
   	background-position: -171px -44px;
   	}
   /*
   *	Active Links
   */
   
   ul.cssmenu li.home a:active {
   	background-position: 0px -22px;
   	}
   
   ul.cssmenu li.store a:active {
   	background-position: -44px -22px;
   	}
   
   ul.cssmenu li.cart a:active {
   	background-position: -94px -22px;
   	}
   
   ul.cssmenu li.faq a:active {
   	background-position: -137px -22px;
   	}
   
   ul.cssmenu li.contact a:active {
   	background-position: -171px -22px;
   	}
   /*
   *	Selected Links
   */
   
   ul.cssmenu li.home a.selected {
   	background-position: 0px -22px;
   	}
   
   ul.cssmenu li.store a.selected {
   	background-position: -44px -22px;
   	}
   
   ul.cssmenu li.cart a.selected {
   	background-position: -94px -22px;
   	}
   
   ul.cssmenu li.faq a.selected {
   	background-position: -137px -22px;
   	}
   
   ul.cssmenu li.contact a.selected {
   	background-position: -171px -22px;
   	}
   /*

3. underattackstore
   Member
   Posted 2 years ago #

   bump

4. minnellium
   Member
   Posted 2 years ago #

   I think you need
   

   .current_page_item a:link, .current_page_item a:visited {color: #fff; text-decoration: underline; }

   or something similar

Topic Closed

This topic has been closed to new replies.