[CSS] Menu zum aufklappen

Dieses Thema im Forum "Webdesign" wurde erstellt von joachim71, 8. September 2010 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 8. September 2010
    Menu zum aufklappen

    Hallo und ein schönen Abend.

    Ich beschäftige mich jetzt seid eine weile mit CSS.
    Nun wollte ich eine Menu zum aufklappen machen mit CSS aber ich bekomme es nicht hin.
    Also wen man die Maus z.B. über Bilder hält das den nach unten das Menu ausklappt.
    Bitte um Hilfe

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>



<div id="menu">
 <ul>
 <li><a href="#">Übersicht</a></li>
 <li><a href="#">Bilder</a></li>
 <li><a href="#">Test</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Links</a></li>
 <li><a href="#">Kontakt</a></li>
 </ul>
 </div>
 
 
 
</body>
</html>


    CSS-Code
    Code:
    body {
 margin: 20px;
 background: #000000;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 13px;
 color: #787878;
}


/* Menu */

#menu {
 width: 910px;
 height: 50px;
 margin: 0 auto;
 padding: 0;
 border-top: 1px #FFFFFF solid;
 background: #565F68;
}

#menu ul {
 margin: 0;
 padding: 0;
 list-style: none;
 line-height: normal;
}

#menu li {
 float: left;
}

#menu a {
 display: block;
 padding: 17px 10px 10px 20px;
 text-transform: uppercase;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 color: #FFFFFF;
 border: none;
}

#menu a:hover, #menu .current_page_item a {
 color: #FFFFFF;
}

#menu a:hover {
 text-decoration: underline;
}
    danke
     
  3. 8. September 2010
    AW: Menu zum aufklappen

    weiß nich wies ich da was erklären soll deshalb hier mal beispielcode von einer meiner seiten

    Code:
    ul.cssmenu {
 position: relative;
 display: block;
 margin: 0px;
 padding: 0px;
}
ul.cssmenu ul {
 position: relative;
 display: none;
}
ul.cssmenu li {
 position: relative;
 display: inline;
 float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
 font-family: arial, sans-serif;
 font-size: 12px;
 line-height: 29px;
 font-weight: bold;
 text-decoration: none;
 text-align: center;
 display: block;
 width: 113.77px;
 height: 29px;
 background: url("./img/background.gif") no-repeat top;

}
ul.cssmenu li:hover > a {
 background: url("./img/hoover.gif") no-repeat bottom;
 font-weight: bold;
 color: #006DEF;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
 position: absolute;
 top: 28px;
 left: -40px;
 display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
 top: 7px;
 left: 73px;
}
ul.cssmenu li li a {
 width: 113.77px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
 color: #000000;
 background-color: #e4e4e4;
}
ul.cssmenu ul a {
 background-color: #d4d4d4;
}
ul.cssmenu ul ul a{
 background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
 background-color: #b4b4b4;
}
 
/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
 _text-indent: 10px;
}
ul.cssmenu ul {
 _display: inline;
 _margin-left: 0px;
 _text-indent: 20px;
}
ul.cssmenu ul ul {
 _text-indent: 30px;
}
ul.cssmenu ul ul ul {
 _text-indent: 40px;
}
ul.cssmenu li {
 _float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
 _text-align: left;
 _width: 120px;
}
ul.cssmenu a:hover {
 _font-weight: bold;
 _background-color: #666666;
}
    statt cssmenu bei dir halt nur menu
     
  4. 9. September 2010
    AW: Menu zum aufklappen

    kannst auch hier mal reinschauen: Tips und Tricks
     
  5. 9. September 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Menu zum aufklappen

    danke erst mal

    habe ich auch schon gefunden aber irgendwie bekomme ich es damit auch nicht zum laufen.

    ich habe es noch mal neu versucht aber irgendwie klappt das menu aber nicht eine und das menu bilder soll unter bilder ausklappen und nicht unter Übersicht.

    Bild

    HTML:
    <!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>


<div id="menu">


<div class="aussen">

<span class="menutag">Übersicht</span>
<a class="innen-1" href="#">test-1</a>
<a class="innen" href="#">test-2</a>
<a class="innen" href="#">test-3</a>
<a class="innen" href="#">test-4</a>
<a class="innen" href="#">test-5</a>
<a class="innen" href="#">test-6</a>
</div>

<span class="menutag">Bilder</span>
<a class="innen-1" href="#">Bilder-1</a>
<a class="innen" href="#">Bilder-2</a>
<a class="innen" href="#">Bilder-3</a>
<a class="innen" href="#">Bilder-4</a>
</div>


</div>


</body>
</html>

    CSS-Code
    Code:
    /* CSS Document */

#menu {
 height: 50px;
 width: 910px;
 background-color: #565F68;
 padding: 0px;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 border: 1px solid #FFFFFF;
}

#menu .aussen {
 background-color: #565F68;
 float: left;
 overflow: hidden;
}

span.menutag {
 display: block;
 cursor: default;
 font-size: 14px;
 font-weight: bold;
 text-transform: uppercase;
 color: #FFFFFF;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 padding-top: 17px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 20px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}

#menu .aussen:hover {
 height: auto;
 background-color: #565F68;
 text-decoration: underline;
 color: #FFFFFF;
 font-weight: bold;
}

a.innen-1 {
margin-top: 2px;
}

a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #FF9900;
color: #0000FF;
}

a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}

a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}
     
  6. 9. September 2010
    AW: Menu zum aufklappen

    bei bilder fehlt der div dazu

    Code:
     <div class="aussen">
 <span class="menutag">Bilder</span> 
 <a class="innen-1" href="#">Bilder-1</a>
 <a class="innen" href="#">Bilder-2</a> 
 <a class="innen" href="#">Bilder-3</a>
 <a class="innen" href="#">Bilder-4</a> 
 </div>
     
  7. 9. September 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Menu zum aufklappen

    ok danke habe ich nicht gesehen aber warum klappt das menü nicht ein es soll ja nur ausklappen den ich die maus darüber halte.


    Bild
     
  8. 9. September 2010
    AW: Menu zum aufklappen

    versuchs mal damit

    Code:
    #menubox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menu {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
height: 50px;
width: 910px;
background-color: #565F68;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #FFFFFF;
}

#menu .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
color: #fff;
}

#menu .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}

a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}

span.menutag {
display: block;
cursor: default;
}


++++++++++++++++++++
 CSS Teil II
++++++++++++++++++++

/*
 Menue-styles fuer IEs
 Am besten per Conditional Comment einbinden.
 Fuer IE5.5 und 5.0 muessen nur geringfuegige kosmetische
 Anpassungen vorgenommen werden (siehe Kommentare).
*/

#menu {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}

a.auss {
float: left;
width: 8em;
height: 1.4em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a;
color: #513913; 
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
a:hover.auss {
overflow: visible;
background-color: #624617;
color: #fff;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #dec79a;
color: #400;
border-collapse: collapse;
}

a.inn {
display: block;
width: 7.9em; /* fuer 5er IEs anpassen, sonst 'zuckt' es */
padding: 2px 0;
font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.inn {
background-color: #ecd8ae;
color:#444;
}
a:hover.inn {
position: relative;
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}
    lag an menu.aussen soweit ich jetzt gesehen habe ... navitexte musst halt wieder mittag machen usw ... aber des bekommst ja hin ;-)
     
  9. 9. September 2010
    AW: Menu zum aufklappen

    Verstehe den Sinn des Thread's nicht ganz.

    Du willst ein Hover-Menü schreiben, weißt aber anscheinend nicht wie. Wo bleiben dann die Fragen oder die Erklärungen?

    Ich werde jetzt mal erklären wie genau das funktioniert, damit Du selber mal rumprobieren kannst:

    An für sich musst du nur mit dem Style-Attribut visibility arbeiten.

    Du erstellst das Menü mit ul, li Tags und setzt den visibility-Attribut auf hidden um eine Anzeige zu vermeiden. Den Titel des Menüs könntest du in einen span-Tag setzten und diesen dann dauerhaft auf visible stellen. Da du willst, dass wenn du die Maus über das Menü fährst, sich das Menü anzeigt, musst du CSS's Möglichkeit nutzen: ul:hover. Der Rest dürfte sich ja erklären.

    Hier ein kleines Beispiel:

    Code:
    <html>
 <head>
 <title>Visibility-Test</title>
 
 <style type="text/css">
 ul.menu {
 visibility: hidden;
 }
 
 ul.menu:hover {
 visibility: visible;
 }
 
 ul.menu span {
 visibility: visible;
 }
 </style>
 </head>
 
 <body>
 <ul class="menu"> 
 <span>Home</span>
 
 <li>Test</li>
 <li>Test #2</li>
 </ul>
 
 <ul class="menu">
 <span>Test</span>
 
 <li>Test</li>
 <li>Test #2</li>
 </ul>
 </body>
</html>
    PS: Ein Forum ist zum Helfen, nicht zum Copy & Pasten da.
     
  10. 9. September 2010
    AW: Menu zum aufklappen

    problem scheint gelöst zu sein dennoch
    Dynamisch Navigationsleisten einblenden
     
  11. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.