Menu med highlight af aktuel side
Ofte kan det i en listemenu være hensigtsmæssigt at kunne se hvilken side, der vises aktuelt (som f.eks. ved søgning med Google).
Dette kan gøres i CSS med '.active' (styrer 'li'-boksen) og '#sub-header' (styrer 'a'-tagget) samt jQuery koden nedenfor. Den øvrige kode viser / styrer selve menuen.
I den aktuelle demosituation kan menuen ikke skifte til en anden side. Derfor: Tryk på et menupunkt og derefter på 'Genindlæs side'.
|
|
jQuery
Sidst i head-delen indsættes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$("#sub-header a").each(function() {
// checks if its the same on the address bar
if(url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#subnav a').each(function(index) {
if(this.href.trim() == window.location)
$(this).addClass("selected");
});
});
</script>
|
CSS
Hele menuens CSS består af:
/* AKTUELT AKTIVT MENUPUNKT*/
.active{ /* Aktiv Li: Farve på baggrund og borderbund*/
background: grey;
border-bottom: solid 4px red;
}
#sub-header .active a{ /* Aktiv Litekst: Farve på baggrund, tekst og understregning på tekst*/
background: green;
color: yellow;
border-bottom: solid 4px lightgreen;
}
/* MENU*/
#menux{ /* menutekst */
font-family: verdana;
font-size: 12px;
font-weight: bold;
}
#menux ul{ /* højde på og centrering af ul */
line-height: 60px;
text-align: center;
}
#menux ul li{ /* Li på række*/
display: inline-block;
}
#menux ul li a{ /* Farve på Li-tekst */
color: pink;
}
#menux ul li a:hover { /* Farve på Li-tekst ved hover*/
color: red;
}
#menux ul li a:active { /* Farve på Li-tekst ved trykket mus*/
color: white;
}
#menux ul li a:link { /* Ingen understregning af link */
text-decorantion: none;
}
a:visited{ /* Farve for aktiv efter afsluttet musetryk */
background-color: yellow;
}
.aktuel{
color: black;
}
.menpad{ /* padding omkring skillestreger i li */
padding: 0 17px 0 17px;
}
|
Menu
En statisk menu kan se sådan ud
<div id="menux">
<ul id="sub-header">
<li><a href="side01.php">Side 1</a></li>
<li class="menpad">|</li>
<li><a href="side02.php">Side 2</a></li>
<li class="menpad">|</li>
<li><a href="side03.php">side 3</a></li>
<li class="menpad">|</li>
<li><a href="side04.php">Side 4</a></li>
</ul>
</div> <!-- MENUX SLUT -->
|
|