CSS | Highlight the Current Page with CSS and JavaScript


WAHHHHHH!!! hampir 2 jam mencari, mengoogle, menbelek dan segala "meng" aku buat....semata2 nak cari CSS highlight menu! puas bangek....hehe... xsah kalao xkongsi ngan "hantu CSS" ni atau lebih di kenali dengan programmer!

di samping kongsi ni, leh gk aku buat simpanan persendirian kat blog ni....lain kali mudah if terhilang coding css ni....apa pon bersih 2.0 9 julai ni.....boleh kenal soGO la aku.....ahahha..

OKeyh ni code dia:

1. HTML Menu (Sorry terpaksa guna image cz blog detect UL wlpn under "pre" tag). sila klik pada image di bawah untuk lihat lebih jelas

2. Ni plak CSS dia

#navigator {
list-style-type: none;
display: table;
padding: 0px;
margin: 0px;
float: center;
right: 20px;
width:100%;
}

#navigator li {
display: inline;
position: relative;
top: 0px;
left: 0px;
}

#navigator li.divider {

}
#navigator li a {
height: 14px;
border-top:2px solid #999;
display: block;
float: left;
cursor: pointer;
padding: 14px 21px 22px 21px;
color: #a0a0a0;
font-weight: bold;
text-decoration: none;
letter-spacing: 0px;
}

#navigator li a:hover {
color: #ffffff;
border-top:2px solid #FFE217;

}

#navigator li a.selected{
color: #ffffff;
border-top:2px solid #FFE217;
}


3. and then Javascript...hope membantu!
function getURLVar(urlVarName) {
var urlHalves = String(document.location).toLowerCase().split('?');
var urlVarValue = '';

if (urlHalves[1]) {
var urlVars = urlHalves[1].split('&');

for (var i = 0; i <= (urlVars.length); i++) { if (urlVars[i]) { var urlVarPair = urlVars[i].split('='); if (urlVarPair[0] && urlVarPair[0] == urlVarName.toLowerCase()) { urlVarValue = urlVarPair[1]; } } } } return urlVarValue; } $(document).ready(function() { route = getURLVar('route'); if (!route) { $('#tab_home').addClass('selected'); } else { part = route.split('/'); if (route == 'site/index') { $('#tab_home').addClass('selected'); } else if (route == 'gallery/index') { $('#tab_gallery').addClass('selected'); } else if (route == 'product/category') { $('#tab_book').addClass('selected'); } else if (route == 'review/index') { $('#tab_contest').addClass('selected'); } else if (route == 'product/category&path=35') { $('#tab_2_package').addClass('selected'); } else if (route == 'product/category&path=36') { $('#tab_2_marketplace').addClass('selected'); } else if (route == 'information/information&information_id=4') { $('#tab_2_gallery').addClass('selected'); } else if (route == 'information/information&information_id=4') { $('#tab_2_review').addClass('selected'); } else if (route == 'information/information&information_id=4') { $('#tab_about').addClass('selected'); } else if (route == 'checkout/cart') { $('#tab_cart').addClass('selected'); } else { $('#tab_home').addClass('selected'); } } });


Popular Posts

.

Sila Klik, Untuk  Menempah Web Profesional!
Facebook Page
Facebook Page
Back to Top