Navigationsmenü im Vordergrund
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ahnung
beitrag
bereich
besten mache
button
container
eigenschaft
inhalt
killer
klicken
navigation
page
quelltext
relativ
sache
stellen
test
versuchen
vielen dank
vordergrund
-
Moin moin,
bin gerade dabei 'ne Homepage neu zu designen. Daf?r m?chte ich unbedingt ein Navigationsmen?, dass man mit einem Klick auf "Navigation" (links an der Seite) aktiviert, d.h. es soll dann im Vordergrund vor der Seite angezeigt werden. Wenn man auf einen Link klckt geht es weg und es ?ffnet sich die Seite. Hat einer 'ne Ahnung wie ich so was am besten mache. Vielen Dank
Total Killer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ok, ich versuch es.
Ich hab eine Website, f?r die ich ein Navigations-Men? haben m?chte. Links ist ein Button "Navigation", wenn man darauf klickt soll ein ca. 600px x 400px gro?es Navigations-Men? sozusagen vor der eigentlichen Website erscheinen. Wenn man da auf einen Link klickt soll sich die entsprechende Seite ?ffnen mit ausgeblendetem Navigations-Men?.
Ich hoffe es ist ein wenig klarer geworden.
Total Killer -
Nein, ein PopUp will ich nicht haben. Du kennst doch bestimmt auch die Werbung, die manchmal so eingeblendet wird, die du dann auf "X" schlie?en kannst, so in der Art m?chte ich das haben.
-
Versuche es mal ?ber den z-index. Du legst das NaviFenster, von mir aus als div, hinter deinen eigentlichen Inhalt. Per Javascript kannst du dann den zIndex ver?ndern und den Container mit der Navi nach vorne holen.
<html>
<head>
<title>Navi-Test</title>
<style type="text/css">
body{
position:relative;
}
#navi{
position:absolute;
width:100px;
height:100px;
background-color:yellow;
z-index:0;
}
#page{
position:absolute;
width:200px;
height:200px;
background-color:red;
z-index:1;
}
</style>
<script type="text/javascript">
function hoverNavi(){
document.getElementById("navi").style.zIndex="2";
}
</script>
</head>
<body>
<div id="navi">
Navi
<a href="http://www.lima-city.de/index.php">Lima</a>
</div>
<div id="page">
Page
<a href="javascript:hoverNavi()">Navi einblenden</a>
</div>
</body>
</html>
-
Ich habs raus. Das Geheimsnis liegt in der Eigenschaft "position". Diese muss "absolute" sein, ansonsten positioniert der Browser das Navi-Men? relativ zum anderen Inhalt, somit an der Stelle wo es im Quelltext steht. Wenn man mehrere solcher Bereiche hat muss man wie noll schon sagte mit dem "zIndex" arbeiten.
Man kann, wie noll es in seinem Quelltext auch gemacht hat, ein "div-Tag" nehmen, dort alles rein schreiben, was man ein- und ausblenden will. Dann kann man mit Javascript ein bisschen arbeiten, ich stelle das mit genaueren Erkl?rungen noch online. Wer m?chte, dem schicke ich dann noch eine Nachricht.
Beitrag ge?ndert am 5.08.2006 00:14 von totalkiller -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage