nicht angemeldet
Pseudoklassen(link, visited, hover, active, focus)
Gunnar BittersmannHallo zusammen,
mein Problem: Gibt es eine Möglichkeit den Zustand-Hover(für ein Menü), nach dem Click zu übernehmen. Ich möchte das der User weis wo er sich gerade befindet. Hier der link zum Menü: www.dizy.de/menu.html
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> - </title>
<style type="text/css">
<!--
/*STARTING*/
/*GLOBAL DEFAULTS*/
* { margin:0; padding: 0;}
body { background-color:#EEEDED;}
/*STARTING*/
/*LEFT-NAVI*/
ul#navigation{
list-style-type:none;
margin-left:0;
padding-left:0;
}
ul#navigation li{
margin-bottom:2px;
}
li#start{
background-color:#2596D5;
display:block;
padding:6px 4px 7px 29px;
width:207px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
text-decoration:none;
}
ul#navigation li a{
background-color:#cbcbcb;
display:block;
padding:6px 4px 7px 29px;
width:207px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
text-decoration:none;
}
ul#navigation li a:link{
background:#cbcbcb url(/images/n_over.gif) no-repeat;
}
ul#navigation li a:visited{
background:#cbcbcb url(/images/n_over.gif) no-repeat;
}
ul#navigation li a:hover{
background:#cbcbcb url(/images/m_over.gif) no-repeat;
color: #333333;
}
ul#navigation li a:active{
background:#cbcbcb url(/images/m_over.gif) no-repeat;
color: #333333;
}
ul#navigation li a:focus{
background:#cbcbcb url(/images/m_over.gif) no-repeat;
color: #333333;
}
#left_navi {
position:absolute;
width:242px;
height:auto;
z-index:1;
left: 138px;
top: 262px;
}
#head_navi {
position:absolute;
width:770px;
height:160px;
z-index:2;
left: 143px;
top: 36px;
}
/*STARTING*/
/*HEADNAVI*/
.glossymenu{
position: relative;
padding: 0;
margin: 0 auto 0 auto;
background: url(/images/menur_bg.gif) repeat-x; /*tab background image path*/
height: 100px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#505050;
text-decoration: none;
font-family: verdana;
font-size: 13px;
font-weight: bold;
padding:0 0 0 25px; /*Padding to accomodate left tab image. Do not change*/
height: 100px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 13px 14px 47px 1px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:link{
color: #505050;
background: url(/images/menur_bg.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:link b{
color: #505050;
background: url(/images/menur_bg.gif) no-repeat; /*right tab image path*/
}
.glossymenu li.current a, .glossymenu li a:visited{
color: #505050;
background: url(/images/menur_bg.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:visited b{
color: #505050;
background: url(/images/menur_bg.gif) no-repeat; /*right tab image path*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #505050;
background: url(/images/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #505050;
background: url(/images/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}
.glossymenu li.current a, .glossymenu li a:active{
color: #505050;
background: url(/images/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:active b{
color: #505050;
background: url(/images/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}
.glossymenu li.current a, .glossymenu li a:focus{
color: #505050;
background: url(/images/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:focus b{
color: #505050;
background: url(/images/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}
-->
</style>
</head>
<body>
<div id="left_navi">
<ul id="navigation">
<li id="start"><b>Sicherheitsdienste</b></li>
<li><a href="#a">Kaufhausüberwachung</a></li>
<li><a href="#b">Kaufhausdetektei</a></li>
<li><a href="#c">Objektschutz</a></li>
<li><a href="#d">Event Security</a></li>
<li><a href="#e">Baustellenüberwachung</a></li>
<li><a href="#f">Observierung</a></li>
</ul>
</div>
<div id="head_navi">
<ul class="glossymenu">
<li><a href="/menu.html"><b>UNTERNEHMEN</b></a></li>
<li><a href="/menu.html"><b>SERVICE</b></a></li>
<li><a href="/menu.html"><b>REFERENZEN</b></a></li>
<li><a href="/menu.html"><b>JOBS</b></a></li>
<li><a href="/menu.html"><b>KONTAKTE</b></a></li>
</ul>
</div>
</body>
</html>
Grüße aus Hamburg
Seko
-
Hallo,
du meinst dass die hover oder active spezifische Formatierung von css bleibt?
Das wirst du nur mit javascript lösen können.Gruss von
shwups.ch-
hi,
du meinst dass die hover oder active spezifische Formatierung von css bleibt?
Das wirst du nur mit javascript lösen können.Nö, es geht auch mit CSS, sogar ziemlich Browserübergreifend, wenn man es richtig macht.
Wobei ich mich den vorrednern hier anschliesse, wenn die möglichkeit besteht, besser gleich den Link entlinken.
mfg
-
-
Hi,
Gibt es eine Möglichkeit den Zustand-Hover(für ein Menü), nach dem Click zu übernehmen. Ich möchte das der User weis wo er sich gerade befindet.
Dann sorge dafür, dass der aktuell "aktive" Menüpunkt eine (zusäztliche) Klasse bekommt, über die er entsprechend formatierbar ist.
Oder, wenn das Menü sowieso serverseitig generiert wird, dafür, dass der aktuelle Menüpunkt gar kein Link ist - dann ist er auch sehr leicht gesondert formatierbar, und es wird nicht unsinniger Weise auf die aktuelle Seite verlinkt.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
@@ChrisB:
nuqneH
Oder, wenn das Menü sowieso serverseitig generiert wird,
oder, wenn wenn das Menü sowieso in jedem HTML-Dokument gepflegt wird,
dafür, dass der aktuelle Menüpunkt gar kein Link ist - dann ist er auch sehr leicht gesondert formatierbar, und es wird nicht unsinniger Weise auf die aktuelle Seite verlinkt.
Auch wenn diese Alternative als zweite genannt wurde, ist sie doch erste Wahl. S.a. http://forum.de.selfhtml.org/archiv/2009/7/t188760/#m1256918
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck) -
Hi ,
Oder, wenn das Menü sowieso serverseitig generiert wird, dafür, dass der aktuelle Menüpunkt gar kein Link ist - dann ist er auch sehr leicht gesondert formatierbar, und es wird nicht unsinniger Weise auf die aktuelle Seite verlinkt.
Vielen dank für den Tip :-)
Gruß
Seko
-