1
trspice
Trying to make CSS highlight link of current page - need help
  • 2008/7/31 4:54

  • trspice

  • Not too shy to talk

  • Posts: 193

  • Since: 2007/3/24


I want to highlight the link of each current page being viewed and I have tried all kinds of methods with CSS but to no avail. I have seen it work using javascript/css combination. Is it not possible with CSS only?
There's nothing but science....
The Reggae Album

2
kris_fr
Re: Trying to make CSS highlight link of current page - need help
  • 2008/7/31 6:27

  • kris_fr

  • Theme Designer

  • Posts: 1009

  • Since: 2005/12/31


hi,

Example in theme.html :
<body class="<{$xoops_dirname}> "id="<{$xoops_dirname}>">

and
<div id="menuBar">
<
div class="navi1" title="ActusRSS"><a href="<{xoAppUrl modules/xhld0/}>" accesskey="n">actusrss</a></div>
<
div class="navi2" title="Tutoriels"><a href="<{xoAppUrl modules/smartmedia/}>" accesskey="b">tutoriels</a></div>
<
div class="navi3" title="Liens Web"><a href="<{xoAppUrl modules/mylinks/}>" accesskey="l">liens</a></div>
<
div class="navi4" title="Outils"><a href="<{xoAppUrl modules/mydownloads/}>" accesskey="o">outils</a></div>
<
div class="navi5" title="Portfolio"><a href="<{xoAppUrl modules/rmmf/}>" accesskey="f">portfolio</a></div>
<
div class="navi6" title="Partenaires"><a href="<{xoAppUrl modules/smartpartner/}>" accesskey="r">partenaires</a></div>
<
div class="navi7" title="Plan du site"><a href="<{xoAppUrl modules/sitemap/}>" accesskey="m">sitemap</a></div>
</
div>

and in style.css :
/* Pour le menu horizontal du header */
#menuBar { margin: 0 0px; height: 30px; line-height: 30px; background: url("img/back_navi2.gif") no-repeat center bottom; clear: both; text-align: center; position: relative; width: 630px; voice-family: ""}""; voice-family:inherit; width: 630px; }    
html>body #menuBar { width:630px;}
#menuBar a { background: transparent; border: none; text-indent: -9999px; overflow: hidden; }
/* lien normal */
#menuBar .navi1 a{width: 90px;height: 30px; float: left; left: 0px; }
#menuBar .navi2 a{width: 90px;height: 30px; float: left; left: 90px; }
#menuBar .navi3 a{width: 90px;height: 30px; float: left; left: 180px; }
#menuBar .navi4 a{width: 90px;height: 30px; float: left; left: 270px; }
#menuBar .navi5 a{width: 90px;height: 30px; float: left; left: 360px; }
#menuBar .navi6 a{width: 90px;height: 30px; float: left; left: 450px; }
#menuBar .navi7 a{width: 90px;height: 30px; float: left; left: 540px; }
/* lien hover */
#menuBar .navi1 a:hover {background: url("img/back_navi2.gif") no-repeat 5px 0px;}
#menuBar .navi2 a:hover {background: url("img/back_navi2.gif") no-repeat -85px 0px;}
#menuBar .navi3 a:hover {background: url("img/back_navi2.gif") no-repeat -175px 0px;}
#menuBar .navi4 a:hover {background: url("img/back_navi2.gif") no-repeat -265px 0px;}
#menuBar .navi5 a:hover {background: url("img/back_navi2.gif") no-repeat -355px 0px;}
#menuBar .navi6 a:hover {background: url("img/back_navi2.gif") no-repeat -445px 0px;}
#menuBar .navi7 a:hover {background: url("img/back_navi2.gif") no-repeat -535px 0px;}
/* lien active */
body#xhld0 .navi1 a {background: url("img/back_navi2.gif") no-repeat 5px -30px;}
body#smartmedia .navi2 a {background: url("img/back_navi2.gif") no-repeat -85px -30px;}
body#mylinks .navi3 a {background: url("img/back_navi2.gif") no-repeat -175px -30px;}
body#mydownloads .navi4 a {background: url("img/back_navi2.gif") no-repeat -265px -30px;}
body#rmmf .navi5 a {background: url("img/back_navi2.gif") no-repeat -355px -30px;}
body#smartpartner .navi6 a {background: url("img/back_navi2.gif") no-repeat -445px -30px;}
body#sitemap .navi7 a {background: url("img/back_navi2.gif") no-repeat -535px -30px;}


@++

3
trspice
Re: Trying to make CSS highlight link of current page - need help
  • 2008/8/1 1:31

  • trspice

  • Not too shy to talk

  • Posts: 193

  • Since: 2007/3/24


Thanks kris_fr, I haven't applied it yet but it does appear to be logical.
There's nothing but science....
The Reggae Album

Login

Who's Online

215 user(s) are online (152 user(s) are browsing Support Forums)


Members: 0


Guests: 215


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Apr 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits