Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag25.04.2011 um 19:20 (UTC)    
Titel: Navigationsbutton hervorheben

ich wollte mal fragen, wie man einen navigations button hervorheben kann, so dass der jeweilge button den man anklickt sich hervorhebt: (z.b. den hovereffekt annimt)...

Code:
<div id="design1">


<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
left: 48%;
top: 231px;
margin-left: -418px;
width: 980px; } /* Breite der Menüpunkte einstellen */
.menu li {
width: 150px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://img.webme.com/pic/r/rhetorischeberatung/button1.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color:#FFFFFF; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #FFFFFF;
background-image: url(http://img.webme.com/pic/r/rhetorischeberatung/button2.png);
color: #FFFFFF; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF; }
//-->
</style>

<!-- Anfang des Scriptes -->
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="http://rhetorischeberatung.de.tl" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Home</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Hauptmenü 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Hauptmenü 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Hauptmenü 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Hauptmenü 5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">Hauptmenü 6</a>
<ul id="smenu6" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
</div>


Zuletzt bearbeitet von rhetorischeberatung am 25.04.2011, 20:26, insgesamt einmal bearbeitet
Beitrag26.04.2011 um 10:15 (UTC)    
Titel:

kann mir wirklich keiner weiterhelfen??
Beitrag26.04.2011 um 11:39 (UTC)    
Titel:

was willst du denn genau verändern?

PS:
/* Aussehen der Menüpunkte beim Hover Effekt */
dort wird der Hover-Effekt eingestellt Wink


lg
Jonas
______________
Updates:
http://twitter.com/JonasKaufmann

Danke dass ich im Baukasten so viel lernen & erfahren durfte!

Beitrag26.04.2011 um 12:10 (UTC)    
Titel:

ich möchte einstellen, dass wenn ich auf einen button klicke dieser dauerhaft den hover effekt annimt bis man auf einen anderen button klickt und der wiederum dauerhaft hover effekt annimt...
hab es bei anderen homepage's schon hinbekommen jedoch schaff ich es nicht
hier mal ein beispiel:

www.isupport.de.ms

hier wird jeweils immer der button hervorgehoben:

wie kriege ich das in meinen code eingebaut

durch einen neuen button code gehts nicht das habe ich schon versucht, man muss irgendwie meinen jetzigen code umschreiben und ein attribut oder so hinzufügen...
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de