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

Hauptmenü horizontal - Untermenü soll auch horizontal

D

däni11

Neues Mitglied
Hallo Leute,

ich kenne mich noch nicht ganz mit dem Orientierungsbefehlen absolute, relative, float usw. aus.
Ich habe ein Horizontales Menü bei dem die untermenüs nicht so wie jetzt nach unten geöffnet werden sollen, sondern alle horizontal. Der Code und ein JPG als Ziel ist im Anhang. Könnt ihr mir bitte Tipps geben?
:)

Code: 
<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

    <meta charset="ISO-8859-1">



    <style> *{
          margin:0px;
          padding:0px;
      }

      @charset "utf-8";

    body {

        font-family: Verdana;
        background-color: #FFFFFF;
        padding: 6px;
    }

    h1 {
        text-align: center;
        border-bottom: 2px solid #009;
        margin-bottom: 0px;
    }
  /* rules for navigation menu
  ========================================================*/
    #site {
      margin:20px auto;
      padding:0px;
      width:795px;
    }
    ul#navmenu {
        margin:0px auto;
    }


    ul#navmenu, ul.sub1, ul.sub2 {
        list-style-type: none;
        }
    ul#navmenu li {
          width:150px;
          text-align: center;
          position: relative;
          float: left;
          margin-right: 4px;
    }

    ul#navmenu  a {
        text-decoration: none;
        color:#808080;
        display: block;
        width: 150px;
        height: 25px;
        line-height: 25px;
        background-color: #FFF;
        border: 1px solid #CCC;
        border-radius: 2px;
    }

    ul#navmenu .sub1 li {

    }

    ul#navmenu .sub1 a {
        margin-top: 5px;
    }

    ul#navmenu .sub2 a {
        margin-left: 10px;
    }

    ul#navmenu li:hover > a {
        background-color: #CFC;
    }

    ul#navmenu li:hover a:hover {
        background-color: #FF0;
    }

    ul#navmenu ul.sub1 {
        display: none;
        position: absolute;
        top: 26px;
        left: 0px;
    }



    ul#navmenu ul.sub2 {
        display: none;
        position: absolute;
        top: 0px;
        left: 145px;
    }

    ul#navmenu li:hover .sub1  {
        display:block;
    }

      ul#navmenu .sub1  li:hover .sub2 {
        display:block;
    }

  </style>

</head>

<body>
  <h1>Navigation Menu</h1>

<div id="site">
  <ul id="navmenu">
      <li><a href="#">hyperlink 1</a></li>
      <li><a href="#">hyperlink 2</a></li>
      <li><a href="#">hyperlink 3</a>
        <ul class="sub1">
            <li><a href="#">hyperlink 3.1</a></li>
            <li><a href="#">hyperlink 3.2</a></li>
            <li><a href="#">hyperlink 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">hyperlink 4</a>
        <ul class="sub1">
            <li><a href="#">hyperlink 4.1</a></li>
            <li><a href="#">hyperlink 4.2</a></li>
            <li><a href="#">hyperlink 4.3</a>
                <ul class="sub2">
                    <li><a href="#">hyperlink 4.3.1</a></li>
                    <li><a href="#">hyperlink 4.3.2</a></li>
                    <li><a href="#">hyperlink 4.3.3</a></li>
                </ul>
            </li>
        </ul>
      </li>
      <li><a href="#">hyperlink 5</a></li>
  </ul>
</div>
</body>
</html>
Menu-horizontal.jpg
 
Ich schreibe dies mit dem iphone und sitze nicht am pc, daher kann ich nichts testen, aber mal als "erster Versuch"
Code: 
Ul#navmenu, ul#navmenu li ul, ul#navmenu li ul li ul{ List-style-Type:None}

Ul#navmenu li ul, ul#navmenu li ul li ul{
Display:None;
Float:left;
Position:relative;
Index: 1001;/*jetzt sind sie nebeneinander, sind nicht sichtbar, verhalten sich relative und haben den z-Index  */}

//Jetzt machen Wür die ul sichtbar, sobald man auf das darüberliegrnde li fährt:

$(document).ready(function() {
    $("#navmenu li:has(ul)").hover(function(){
        $(this).find("ul").slideDown();
    }, function(){
        $(this).find("ul").hide();
    });
//das erste submenü wird sichtbar,

    $("#navmenu li ul li:has(ul)").hover(function(){
        $(this).find("ul").slideDown();
    }, function(){
        $(this).find("ul").hide();
    });

//das zweite submenü erscheint

});

Hilft das?
 
Zuletzt bearbeitet:
Wichtig!
Du musst nach dem letzten untermenü unbedingt clearen
Auch nach dem letzten Eintrag im 2 submenü

D.h.
<ul>
Li ich bin der erste link li
Li ich der zweite li
Ul
Li ich bin der erste Eintrag im ersten submenü li
Li ich der zweite<li>
Ul
Li ich bin nur ein Eintrag im zweiten submenü li
<DIV style... Clear:both ... </DIV>
/ul
Li ich der dritte in zweiter ebene und auch der letzte li
<DIV .... Clear .... DIV
/ul
Li ich bin in erster ebene li
/ul
 
Hallo danke für deine Tipps. Ich muss mir in Ruhe die ul li ul li Story anschauen.
Und das mit dem $ kenne ich garnicht. Ist das PHP oder sowas?
Bisher habe ich sowas gefunden auf CSS Basis:
Der ´Gringo´ hat die Position relative auf ul#navmenu angewandt, anstatt auf die li´s. Aktuell sieht meins so aus. Also, es kommt dem schon nahe. Aber funktionieren tuts noch nicht. Muss bisschen rumschieben und das Linkverhalten a ordentlich anpassen. Wenn es denn überghaupt am Ende hinhaut.??? ~

Code: 
<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

  <style> *{
          margin:0px;
          padding:0px;
      }

      @charset "utf-8";

    body {

        font-family: Verdana;
        background-color: #FFFFFF;
        padding: 6px;

    }

    h1 {
        text-align: center;
        border-bottom: 2px solid #009;
        margin-bottom: 0px;
    }
  /* rules for navigation menu
  ========================================================*/
    #site {
      margin:20px auto;
      padding:0px;
      width:795px;
    }
    ul#navmenu {
        margin:0px auto;
        position: relative;  /*============ war vorher nicht*/
    }


    ul#navmenu, ul.sub1, ul.sub2 {
        list-style-type: none;
        }
    ul#navmenu li {
          width:150px;
          text-align: center;
      /*    position: relative;      ist eine Änderung*/
          float: left;
          margin-right: 4px;
    }
    ul#navmenu li ul li ul li{
        width:10px;
        margin-right:10px;
        border-color:#117342
    }

    ul#navmenu li ul li ul li a{
        width: 20px;


    }

    ul#navmenu  a {
        text-decoration: none;
        color:#808080;
        display: block;
        width: 150px;
        height: 25px;
        line-height: 25px;
        background-color: #FFF;
        border: 1px solid #CCC;
        border-radius: 2px;
    }

    ul#navmenu .sub1 li {

    }

    ul#navmenu .sub1 a {
        margin-top: 5px;
    }

    ul#navmenu .sub2 a {
        margin-left: 315px;  /*= vorher 15 px*/
    }

    ul#navmenu li:hover > a {
        background-color: #CFC;
    }

    ul#navmenu li:hover a:hover {
        background-color: #FF0;
    }

    ul#navmenu ul.sub1 {

        display: none;
        position: absolute;
        top: 26px;
        left: 40px;
    }



    ul#navmenu ul.sub2 {
        display: none;
        position: absolute;
        top: 30px;
        left: 145px;
    }

    ul#navmenu li:hover .sub1  {
        display:block;
    }

      ul#navmenu .sub1  li:hover .sub2 {
        display:block;
    }

  </style>

</head>

<body>
  <h1>Navigation Menu</h1>

<div id="site">
  <ul id="navmenu">
      <li><a href="#">hyperlink 1</a></li>
      <li><a href="#">hyperlink 2</a></li>
      <li><a href="#">hyperlink 3</a>
        <ul class="sub1">
            <li><a href="#">hyperlink 3.1</a></li>
            <li><a href="#">hyperlink 3.2</a></li>
            <li><a href="#">hyperlink 3.3</a></li>
            <li><a href="#">hyperlink 3.4</a></li>
        </ul>
      </li>
      <li><a href="#">hyperlink 4</a>
        <ul class="sub1">
            <li><a href="#">hyperlink 4.1</a></li>
            <li><a href="#">hyperlink 4.2</a></li>
            <li><a href="#">hyperlink 4.3</a></li>
            <li><a href="#">hyperlink 4.4</a>
                <ul class="sub2">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
        </ul>
      </li>
      <li><a href="#">hyperlink 5</a></li>
  </ul>
</div>
</body>
</html>
 
$ nennt sich jquery. Das ist relativ simple...

GRINGO.....????

Nagut....

Es ist einfach erklärt, du musst jquery erst einbinden, nebenbei jquery ist nicht css. Funktioniert mein Code nicht? Hatte Nachtdienst und kam noch zu kein pc
 
Clear nach dem float....

Code: 
<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

  <style> *{
          margin:0px;
          padding:0px;
      }

      @charset "utf-8";

    body {

        font-family: Verdana;
        background-color: #FFFFFF;
        padding: 6px;

    }

    h1 {
        text-align: center;
        border-bottom: 2px solid #009;
        margin-bottom: 0px;
    }
  /* rules for navigation menu
  ========================================================*/
    #site {
      margin:20px auto;
      padding:0px;
      width:795px;
    }
    ul#navmenu {
        margin:0px auto;
        position: relative;  /*============ war vorher nicht*/
    }


    ul#navmenu, ul.sub1, ul.sub2 {
        list-style-type: none;
        }
    ul#navmenu li {
          width:150px;
          text-align: center;
      /*    position: relative;      ist eine Änderung*/
          float: left;
          margin-right: 4px;
    }
    ul#navmenu li ul li ul li{
        width:10px;
        margin-right:10px;
        border-color:#117342
    }

    ul#navmenu li ul li ul li a{
        width: 20px;


    }

    ul#navmenu  a {
        text-decoration: none;
        color:#808080;
        display: block;
        width: 150px;
        height: 25px;
        line-height: 25px;
        background-color: #FFF;
        border: 1px solid #CCC;
        border-radius: 2px;
    }

    ul#navmenu .sub1 li {

    }

    ul#navmenu .sub1 a {
        margin-top: 5px;
    }

    ul#navmenu .sub2 a {
        margin-left: 315px;  /*= vorher 15 px*/
    }

    ul#navmenu li:hover > a {
        background-color: #CFC;
    }

    ul#navmenu li:hover a:hover {
        background-color: #FF0;
    }

    ul#navmenu ul.sub1 {

        display: none;
        position: absolute;
        top: 26px;
        left: 40px;
    }



    ul#navmenu ul.sub2 {
        display: none;
        position: absolute;
        top: 30px;
        left: 145px;
    }

    ul#navmenu li:hover .sub1  {
        display:block;
    }

      ul#navmenu .sub1  li:hover .sub2 {
        display:block;
    }

.ende{clear:both; width:0px; width:0px;}

  </style>

</head>

<body>
  <h1>Navigation Menu</h1>

<div id="site">
  <ul id="navmenu">
      <li><a href="#">hyperlink 1</a></li>
      <li><a href="#">hyperlink 2</a></li>
      <li><a href="#">hyperlink 3</a>
        <ul class="sub1">
            <li><a href="#">hyperlink 3.1</a></li>
            <li><a href="#">hyperlink 3.2</a></li>
            <li><a href="#">hyperlink 3.3</a></li>
            <li><a href="#">hyperlink 3.4</a></li>
<DIV Class="Ende"> </DIV>
        </ul>
      </li>
      <li><a href="#">hyperlink 4</a>
        <ul class="sub1">
            <li><a href="#">hyperlink 4.1</a></li>
            <li><a href="#">hyperlink 4.2</a></li>
            <li><a href="#">hyperlink 4.3</a></li>
            <li><a href="#">hyperlink 4.4</a>
                <ul class="sub2">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                     <DIV class="Ende"></DIV >
                </ul>
            </li>
<DIV class="Ende"></DIV>
        </ul>
      </li>
      <li><a href="#">hyperlink 5</a></li>
  </ul>
</div>
</body>
</html>
[/quote]
 
Hallo,

hab heute zeit gehabt und mal rumgewerckelt, hier ein fix fertiges menü(1 zwei sachen gibts noch aber der großteil ist behoben)

Weiters achte auf dynamische Einträge, d.h. keine pixelangeben, sondrn Prozent.

Die breite der ul wird automatishcerrechnet. Bzw. die Breite der li im ul wird automatisch errechnen. Dazu werden die LI Einträge gezählt und durch die ul Breite dividiert.

Das ganze sollte jetzt dynamischer sein.

lass mich wissen ob es geholfen hat??

Achja, Tipps sind gerne willkommen!

Code: 
<!DOCTYPE html>
<html>
<head>
    <title>Titel</title>
  <style> *{
          margin:0px;
          padding:0px;
      }
      @charset "utf-8";
    body {
        font-family: Verdana;
        background-color: #FFFFFF;
        padding: 6px;
    }
    h1 {
        text-align: center;
        border-bottom: 2px solid #009;
        margin-bottom: 0px;
    }
  /* rules for navigation menu
  ========================================================*/
    #site {
      margin:20px auto;
      padding:0px;
      width:795px;
    }
    ul#navmenu {
    width:80%;
        margin:0px auto;
    list-style-type:none;
    }
    ul#navmenu li {
          width:15%;
          text-align: center;
      /*    position: relative;      ist eine Änderung*/
          float: left;
          margin: 0% 1% 0% 1%;
          background-color: #FFF;
        border: 1px solid #CCC;
    }
  
  
    ul#navmenu li ul {
    width:auto;
    background-color:#a20300;
    list-style-type:none;
    }
  
    ul#navmenu li ul li{
        width:auto;
        margin:1%;
        border-color:#CCC;
      
        float:left;
    }

    ul#navmenu li ul li ul li{
        width:auto;
        margin:1%;
        border-color:#CCC;
        float:left;
      
    }

    ul#navmenu  a {
        text-decoration: none;
        color:#808080;
        line-height: 25px;
        border-radius: 2px;
        word-break:break-all;
    }
ul#navmenu li ul li a {
      
        color:black;
      
    }

    ul#navmenu>li:hover>a{
        color: yellow;
    }
  
    ul#navmenu>li>ul>li>ul>li:hover a{
        color: black;
    }
    ul#navmenu li:hover{
        background-color: yellow;

    }

ul#navmenu>li:hover{
        background-color: #a20300;

    }

    ul#navmenu>li ul {
      display:none;
      width:500px;
      position:relative;
        z-index:1001;
    }
.ende{clear:both; width:0px; height:0px;}

  </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script >
$(document).ready(function(){
    $("ul#navmenu li").outerWidth(Math.floor($("ul#navmenu").innerWidth() / $("ul#navmenu").children("li").length), true);
      $("ul#navmenu>li>ul>li>ul>li").css("width",(Math.floor($("ul#navmenu>li>ul>li>ul").innerWidth() / $("ul#navmenu>li>ul>li>ul").children("li").length)));
  
  
  $("ul#navmenu>li").hover(function(){
    $(this).addClass("current");
  }, function(){
    $(this).removeClass("current");
  });

  
  $("ul#navmenu li:has(ul)").hover(function(){
  
              //var erstesul = $(this).position(); siehe unten
            //  $(this).find("ul").css("left", erstesul.left); falls du wieder auf  position absolute gehst und ie menüs erscheinen wo anders.....
    $("ul#navmenu li ul").outerWidth(Math.floor($(window).width() - ($("ul#navmenu>.current").position().left + ($(window).width() - ($("ul#navmenu").position().left + $("ul#navmenu").outerWidth(true))))),true);
  
    $(this).children("ul").slideDown("fast",function(){
    $(this).parents("li").css("backgroundColor", "#a20300");
    $(this).parent("li").css("border", "none");
    $(this).parents("ul").css("border", "none");
    $(this).parents("ul").css("backgroundColor", "white");
    });
  
        }, function(){
        $(this).find("ul").hide(function(){
    $(this).parents("li").css("border", "1px solid #CCC");
    $(this).parent("li").css("backgroundColor", "white");
    $(this).parents("ul").not("ul#navmenu").css("backgroundColor", "#a20300");
    });
  
  
    });

});
</script>
</head>
<body>
  <h1>Navigation Menu</h1>

<div id="site">
  <ul id="navmenu">
  
      <li><a href="#">hyperlink 1</a></li>
      <li><a href="#">hyperlink 2</a></li>
      <li><a href="#">hyperlink 3</a>
        <ul class="sub1">
            <li><a href="#">hyperlink 3.1</a></li>
            <li><a href="#">hyperlink 3.2</a></li>
            <li><a href="#">hyperlink 3.3</a></li>
            <li><a href="#">hyperlink 3.4</a></li>
<div class="ende"> </div>
        </ul>
      </li>
      <li><a href="#">hyperlink 4</a>
        <ul class="sub1">
            <li><a href="#">hyperlink 4.1</a></li>
            <li><a href="#">hyperlink 4.2</a></li>
            <li><a href="#">hyperlink 4.3</a></li>
            <li><a href="#">hyperlink 4.4</a>
                <ul>
                    <li><a href="#">1sdsdsd</a></li>
                    <li><a href="#">2sdsdsdsdsd</a></li>
                    <li><a href="#">3sdsd</a></li>
                    <li><a href="#">sdsdsdsd</a></li>
                    <li><a href="#">sdsdsdsd</a></li>
                  
                    <div class="ende"></div >
                </ul>
            </li>
<div class="ende"></div>
        </ul>
      </li>
      <li><a href="#">hyperlink 5</a></li>
      <div class="ende"></div>
      </div>
  </ul>
</body>
</html>

und die ideen von mir hast du zwar eingebracht, aber nicht sehr überragend, falshe stellen, falsche großschreibung usw....

aber macht doch nichts, solange es hilft

lass mich bitte eine antwort erfahren
 
Hey, vielen dank für die Hilfe und die Vorschläge.
Ich hatte die Tage Schwierigkeiten mit meinem PC. Er fährt sich manchmal fest. Und da war ich vorerst in einem anderem Forum unterwegs, um Abhilfe zu suchen.

Kann es denn Sein, dass wenn ich ein Skript (ich bin ja Anfänger wie ihr wisst) schreibe und es über WeboctonScriptly im IE teste, sich der PC aufhängt? Also, wenn das Programm von mir falsch geschrieben wurde?
Oder würde da Webocton Scriptly vorher einen Fehler anzeigen?
Zu dem Menü habe ich jetzt einen anderen Plan. Das Untermenü wird sich erst auf dem nächsten Link öffnen und soll dann stehen bleiben, bis man einen anderen Link wählt. Und das nächste Menü auch. Also nicht mehr dynamisch.
Das Beispiel von thecain ist grafisch schonmal nicht schlecht. Rein mit Html und CSS.
Kommt das Skript von thecain denn ohne clear aus?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben