• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Vertikales Menü horizontal machen

A

aJunkie

Mitglied
Halli Hallo,

Ich kenne mich mit css kaum aus und bitte Euch um Eure Hilfe, nur um das vertikale Menü horizontal zu und nach unten aufklappbar zu machen.

Das ist der css-Code:
PHP: 
body{
    padding:0;
    margin:0;
    color:#ffff00;
    font-family: verdana, tahoma, sans-serif;
    font-size: 76%;
    background-color: #ffff00;
    background-image: none;
    background-repeat: no-repeat;
}

a{
text-decoration:none;
background-color:inherit;
font-weight:bold;
color:#286ea0;
}

a:hover{
background-color:inherit;
color:#303030;
}

h1{
    margin:0;
    font-size:3.6em;
    letter-spacing:-3px;
    text-align:right;
    background-color:inherit;
    color:#000000;
}

h2{
margin:5px 0 10px 0;
font-size:1.6em;
letter-spacing:-1px;
font-weight:normal;
}

p{
margin:0 0 15px 0;
line-height:1.3em;
}

img{
float:left;
margin:0 10px 8px 0;
}

#title{
    width:700px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: -4px;
    margin-left: auto;
}

#container{
    margin:0 auto 15px auto;
    width:1000px;
    padding:10px;
    background:#ffffff url(front.png) bottom left no-repeat;
    color:#000000;
    border:20px solid #000000;
}

#sidebar{
    float:left;
    width:120px;
    padding-left:170px;
}

#main{
    width:685px;
    float:right;
}

#footer{
clear:both;
}

.menu{
    display:block;
    width:125px;
    padding:4px 2px 4px 10px;
    font-size:1.1em;
    font-weight:bold;
    background-color:inherit;
    color:#286ea0;
    border:1px solid #ffffff;
}

.menu:hover{
background-color:#f8f8f8;
color:#286ea0;
border:1px solid #dadada;
}

.credits{
margin-bottom:0;
font-size:0.8em;
background-color:inherit;
color:#aaaaaa;
}

.credits a{
background-color:inherit;
color:#aaaaaa;
}

.small{
font-size:0.8em;
}

.center{
text-align:center;
}

Und hier die Index:
PHP: 
Meta-Tags
<style type="text/css">
<!--
.Stil1 {
    color: #000000;
    font-size: 2.5em;
}
-->
</style>
</head>

<body>
<div id="title">
  <h1 class="Stil1">Homepage-Titel</h1>
</div>
<div id="container">
<div id="sidebar">
  <p><a class="menu" href="index.html">Home</a>
    <a class="menu" href="index2.html">Geschichte</a>
    <a class="menu" href="index3.html">Footballregeln</a><a class="menu" href="#">Mitglied werden</a>
    <a class="menu" href="#"> Bilder</a><a class="menu" href="#">Training</a><a class="menu" href="#">Anfahrt</a><a class="menu" href="#">Sponsoren</a>
    <a class="menu" href="#">Links</a>
    <a class="menu" href="#">Kontakt</a>
    <a class="menu" href="#">Forum</a>
    <a class="menu" href="#">Impressum</a><br />
</p>
</div>

<div id="main">
<h2>Sample</h2>
<img src="dragonmini.png" width="125" height="125" alt="Dragon screenshot" />
<p>Sample</p>
<h2>An open source design!</h2>
<p>Sample</p>

<p class="credits">Copyright C. Yanik, 2009</a></p>
</div>

<div id="footer"></div>
</div>
</body>
</html>
 
nur um das vertikale Menü horizontal zu und nach unten aufklappbar zu machen.
HTML: 
<p><a class="menu" href="index.html">Home</a>
    <a class="menu" href="index2.html">Geschichte</a>
    <a class="menu" href="index3.html">Footballregeln</a><a class="menu" href="#">Mitglied werden</a>
    <a class="menu" href="#"> Bilder</a><a class="menu" href="#">Training</a><a class="menu" href="#">Anfahrt</a><a class="menu" href="#">Sponsoren</a>
    <a class="menu" href="#">Links</a>
    <a class="menu" href="#">Kontakt</a>
    <a class="menu" href="#">Forum</a>
    <a class="menu" href="#">Impressum</a><br />
</p>
Zum Vergrößern anklicken....
Ein Menu wird in den meissten Fällen als eine Unsortiere Liste (<ul>) ausgezeichnet. Um deine Vorstellung zu realisieren, musst du dann <li> floaten und das "ausklappen" müsste mit pseudo :hover gehen.

Mfg
 
Sorry, dass ich den Thread zombisiere.

Also meine Menüs funktionieren einwandfrei.
Ich habe ein horizontales und auch ein vertikales.

Da aber die Menüpunkte sich immer weiter häufen, will ich wie mein horizontales Menü das vertikale mit Untermenüs erweitern.

Da es vertikal ist, muss ich mir zuerst überlegen, in welche Richtung das Untermenü ausgefahren werden soll.
Nach Klick öffnet sich das Untermenü nach unten...
oder nach rechts beim Hovern...

Mir ist es eigentlich fast egal. Mein Favorit jedoch wäre der Benutzerfreundlichkeit wegen, dass sich das Untermenü nach rechts beim Hovern ausfährt.

Kennt jemand ein Tutorial, was mein bestehendes Menü mit Untermenü's versehen würde?

Im Prinzip müsste ich das Untermenü <ul><li> per CSS definieren?!

Hier die CSS des jetzigen Menüs:
PHP: 
/*-- Menü 2 --*/
.menu2{
display:block;
text-align:center;
width:100px;
height:38px;
line-height:38px;
font-size:14px;
font-weight:bold;
background:#ffffff url(/img/button.jpg) no-repeat;
color:#6DBFFB;
}

.menu2:hover{
background-color:#ffffff;
color:#ffffff;
}
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben