Ankündigung

Einklappen
Keine Ankündigung bisher.

Überlappende Menüs nur mit PHP und CSS

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Überlappende Menüs nur mit PHP und CSS

    Hallo,
    ich schreibe gerade ein Menü und habe ein Lernbeispiel vorbereitet. Die Codes liegen anbei. Wie bekomme ich es hin, dass die sub und subsubdropdowns (für hier extra den Namen so eingetragen) zum Einen neben z.B. "Montag" anfangen und den Eintrag "Februar" nicht verschieben? Eine Javascriptvariante habe ich bereits, aber diese soll vermieden werden. Gibt es in CSS einen Befehl, der eine Listenüberlappung erlaubt?

    Viele Grüße und vielen Dank schonmal!

    Code:
    //index.php
    <div id="Everything">
       <div id="topBarMenu">
        	<div id="menuContainer">
    <?php
    $Eebene= array("Januar", "Februar");
    $Zebene= array("Montag", "Dienstag");
    $Debene= array(1,2);
    
    echo '<link rel="stylesheet" type="text/css" href="main.css">';
    
    echo '<ul id="dropdown">';
    foreach ($Eebene as $erste_Ebene){
    	echo '<li><a href="#">' . $erste_Ebene . '</a>';
    	echo '<ul id="subdropdown">';
    	foreach ($Zebene as $zweite_Ebene){
    		echo '<li><a href="'. $zweite_Ebene .'" >'. $zweite_Ebene . '</a>';
    		echo '<ul id="subsubdropdown">';
    		foreach($Debene as $dritte_Ebene){
    			echo '<li><a href="'. $dritte_Ebene .'">'. $dritte_Ebene . '</a></li>';
    		}
    		echo '</ul></li>';
    	}
    	echo '</ul>';
    }
    
    echo '</ul>';
    ?>
    </div>
    </div>
    </div>
    Code:
    //main.css
    html {
    	overflow-y:scroll;
    	background-color: #FFFFCC;						/* Hintergrund der gesamten Seite*/
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    body {
    	margin-top: 0px;
    	margin-bottom: 0px;
    }
    
    #Everything {
    	width: 900px;				/* 900px */
    	margin-left: auto;
    	margin-right: auto;
    	border: 2px solid;			/* 2px */
    	border-color: #359483;		/* #C52E2D */
    	border-top: 0px;
    	border-bottom: 0px;
    	background-color: #FFFFCC;   /* Hintergrund -nichtTextkörperHintergrund */
    }
    
    
    
    
     a.topList:link    {color:white; text-decoration:none;}
     a.topList:visited {color:white; text-decoration:none;}
     a.topList:hover   {color:white; text-decoration:none; background-color:#297164;} <!--#000066 -->
     a.topList:active  {color:white; text-decoration:none; background-color:#297164;}
    
    
    /* Menü unter den Bildern */
    #topBarMenu {
    	height: 30px;
    	padding-left: 0px;
    	background-color: #359483;			/* Huntergrund Menüleiste gesamt	*/
    }
    #menuContainer {
    	width: 100%;
    	z-index: 1;
    }
    #dropdown {
    	margin: 0;
    	padding: 0;
    	z-index: 1;
    }
    #dropdown li {
    	margin: 0px 20px 0px 20px;
    	padding: 0;
    	list-style: none;
    	float: left;
    	font: 18px arial;
    }
    #dropdown li a {
    	display: block;
    	margin: 0 1px 0 0;
    	padding: 2px 6px 3px 6px;
    	background: #359483;				/* Hintergrundfarbe der Menüeinträge	*/
    	color: #FFF;						/* Textfarbe der Menüleiste	*/
    	text-align: center;
    	text-decoration: none
    }
    
    #dropdown li ul{
    	margin: 0; padding: 0;
        position: absolute;
    	display: none;
    }
    
    #dropdown li:hover ul {
        display: block;  /* Unternavigation in modernen Browsern einblenden */
      }
    #dropdown li a:hover {
    	background: #297164;					/* OnMouseOver-Hintergrund #666	*/
    }
    #dropdown li ul li{
    	float: none;
    	display: block;
    }
    #dropdown a, #dropdown span {
        display: block;
        width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
        padding: 0.2em 1em;
        text-decoration: none; font-weight: bold;
        border: 1px solid black;
        border-left-color: white; border-top-color: white;
      }
    #dropdown li ul li ul li{
    	display: none;
    }
    #dropdown li ul li:hover ul li{
    	display: block;
    }


  • #2
    Code:
    position:absolute;
    top:?px;
    left:?px;
    bzw.
    Code:
    position:absolute;
    margin-top:?px;
    margin-left:?px;
    und evtl.
    Code:
    z-index:?;
    ...die Werte für die Fragezeichen musst Du natürlich herausfinden.
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

    Kommentar


    • #3
      Zitat von Arne Drews Beitrag anzeigen
      Code:
      position:absolute;
      top:?px;
      left:?px;
      bzw.
      Code:
      position:absolute;
      margin-top:?px;
      margin-left:?px;
      und evtl.
      Code:
      z-index:?;
      ...die Werte für die Fragezeichen musst Du natürlich herausfinden.
      Ach das genügt schon, danke! Werde ich direkt ausprobieren.

      Viele Grüße

      Kommentar


      • #4
        Ich bin jetzt nach langer Zeit dazu gekommen, das auszuprobieren. Es funktioniert auch recht gut.

        Das einzige Problem, was derzeit noch besteht, ist dieses:

        Wenn ich auf den zweiten Menüeintrag gehe, so klappt sich das Menü dazu zwar aus, beginnt aber auf der Höhe des ersten Menüeintrags.

        Lässt sich dies irgendwie anpassen? Hier der Beispielcode:

        Code:
        //index.php
        <div id="Everything">
           <div id="topBarMenu">
            	<div id="menuContainer">
        <?php
        $Eebene= array("Januar", "Februar");
        $Zebene= array("Montag", "Dienstag");
        $Debene= array(1,2);
        
        echo '<link rel="stylesheet" type="text/css" href="main.css">';
        
        echo '<ul id="dropdown">';
        foreach ($Eebene as $erste_Ebene){
        	echo '<li><a href="#">' . $erste_Ebene . '</a>';
        	echo '<ul id="subdropdown">';
        	foreach ($Zebene as $zweite_Ebene){
        		echo '<li><a href="'. $zweite_Ebene .'" >'. $zweite_Ebene . '</a>';
        		echo '<ul id="subsubdropdown">';
        		foreach($Debene as $dritte_Ebene){
        			echo '<li><a href="'. $dritte_Ebene .'">'. $zweite_Ebene . $dritte_Ebene . '</a></li>';
        		}
        		echo '</ul></li>';
        	}
        	echo '</ul>';
        }
        
        echo '</ul>';
        ?>
        </div>
        </div>
        </div>
        Code:
         //main.css
        html {
        	overflow-y:scroll;
        	background-color: #FFFFCC;						/* Hintergrund der gesamten Seite*/
        	font-family: Arial, Helvetica, sans-serif;
        }
        
        body {
        	margin-top: 0px;
        	margin-bottom: 0px;
        }
        
        #Everything {
        	width: 900px;				/* 900px */
        	margin-left: auto;
        	margin-right: auto;
        	border: 2px solid;			/* 2px */
        	border-color: #359483;		/* #C52E2D */
        	border-top: 0px;
        	border-bottom: 0px;
        	background-color: #FFFFCC;   /* Hintergrund -nichtTextkörperHintergrund */
        }
        
        
        
        
         a.topList:link    {color:white; text-decoration:none;}
         a.topList:visited {color:white; text-decoration:none;}
         a.topList:hover   {color:white; text-decoration:none; background-color:#297164;} <!--#000066 -->
         a.topList:active  {color:white; text-decoration:none; background-color:#297164;}
        
        
        /* Menü unter den Bildern */
        #topBarMenu {
        	height: 30px;
        	padding-left: 0px;
        	background-color: #359483;			/* Huntergrund Menüleiste gesamt	*/
        }
        #menuContainer {
        	width: 100%;
        	z-index: 1;
        }
        #dropdown {
        	margin: 0;
        	padding: 0;
        	z-index: 1;
        }
        #dropdown li {
        	margin: 0px 20px 0px 20px;
        	padding: 0;
        	list-style: none;
        	float: left;
        	font: 18px arial;
        }
        #dropdown li a {
        	display: block;
        	margin: 0 1px 0 0;
        	padding: 2px 6px 3px 6px;
        	background: #359483;				/* Hintergrundfarbe der Menüeinträge	*/
        	color: #FFF;						/* Textfarbe der Menüleiste	*/
        	text-align: center;
        	text-decoration: none
        }
        
        #dropdown li ul{
        	margin: 0; padding: 0;
            position: absolute;
        	display: none;
        }
        
        #dropdown li:hover ul {
            display: block;  /* Unternavigation in modernen Browsern einblenden */
          }
        #dropdown li a:hover {
        	background: #297164;					/* OnMouseOver-Hintergrund #666	*/
        }
        #dropdown li ul li{
        	float: none;
        	display: block;
        }
        #dropdown a, #dropdown span {
            display: block;
            width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
            padding: 0.2em 1em;
            text-decoration: none; font-weight: bold;
            border: 1px solid black;
            border-left-color: white; border-top-color: white;
          }
        
        #dropdown li ul li ul{
        	position: absolut;
        	top: 0px;
        	left: 128px;
        }
        #dropdown li ul li ul li{
        	display: none;
        }
        #dropdown li ul li:hover ul li{
        	display: block;
        }

        Kommentar


        • #5
          Hat sich nun erledigt. Ich habe die fehlende Einstellung gefunden:

          Code:
          #dropdown li {
                  position: relative; /* fehlte */
          	margin: 0px 20px 0px 20px;
          	padding: 0;
          	list-style: none;
          	float: left;
          	font: 18px arial;
          }

          Kommentar


          • #6
            Hallo,
            ich habe nun in den Untermenüs längere Einträge enthalten, als in dem oberen Reiter. Die Bezeichnung der Einträge wird für jedes Listenelement umgebrochen und der zur Verfügung stehende Platz ist maximal so breit, wie das Parentelement. Wie kann ich das so hinbekommen, dass der Platz des ausfahrenden Menüs beliebig groß ist und automatisch auf die Länge des maximalen Elementes angepasst wird?

            VIele Grüße

            Kommentar


            • #7
              Auch hier war die Lösung nahe:

              Code:
              #dropdown li ul li a{
              	width: auto;
              	white-space: nowrap;
              }
              white-space: nowrap;

              Kommentar


              • #8
                Habe doch noch eine Frage.

                Hier zunächst der Code, Frage am Ende:

                Code:
                //index.php
                <div id="Everything">
                   <div id="topBarMenu">
                    	<div id="menuContainer">
                <?php
                $Eebene= array("Januar", "Februar");
                $Zebene= array("Montag the First", "Dienstag the Second");
                $Debene= array(1,2);
                
                echo '<link rel="stylesheet" type="text/css" href="main.css">';
                
                echo '<ul id="dropdown">';
                foreach ($Eebene as $erste_Ebene){
                	echo '<li><a href="#">' . $erste_Ebene . '</a>';
                	echo '<ul id="subdropdown">';
                	foreach ($Zebene as $zweite_Ebene){
                		echo '<li><a href="'. $zweite_Ebene .'" >'. $zweite_Ebene . '</a>';
                		echo '<ul id="subsubdropdown">';
                		foreach($Debene as $dritte_Ebene){
                			echo '<li><a href="'. $dritte_Ebene .'">'. $zweite_Ebene . $dritte_Ebene . '</a></li>';
                		}
                		echo '</ul></li>';
                	}
                	echo '</ul>';
                }
                
                echo '</ul>';
                ?>
                </div>
                </div>
                </div>
                Code:
                //main.css
                html {
                	overflow-y:scroll;
                	background-color: #FFFFCC;						/* Hintergrund der gesamten Seite*/
                	font-family: Arial, Helvetica, sans-serif;
                }
                
                body {
                	margin-top: 0px;
                	margin-bottom: 0px;
                }
                
                #Everything {
                	width: 900px;				/* 900px */
                	margin-left: auto;
                	margin-right: auto;
                	border: 2px solid;			/* 2px */
                	border-color: #359483;		/* #C52E2D */
                	border-top: 0px;
                	border-bottom: 0px;
                	background-color: #FFFFCC;   /* Hintergrund -nichtTextkörperHintergrund */
                }
                
                
                
                
                 a.topList:link    {color:white; text-decoration:none;}
                 a.topList:visited {color:white; text-decoration:none;}
                 a.topList:hover   {color:white; text-decoration:none; background-color:#297164;} <!--#000066 -->
                 a.topList:active  {color:white; text-decoration:none; background-color:#297164;}
                
                
                /* Menü unter den Bildern */
                #topBarMenu {
                	height: 30px;
                	padding-left: 0px;
                	background-color: #359483;			/* Huntergrund Menüleiste gesamt	*/
                }
                #menuContainer {
                	width: 100%;
                	z-index: 1;
                }
                #dropdown {
                	margin: 0;
                	padding: 0;
                	z-index: 1;
                }
                #dropdown li {
                	position: relative;
                	margin: 0px 20px 0px 20px;
                	padding: 0;
                	list-style: none;
                	float: left;
                	font: 18px arial;
                }
                #dropdown li a {
                	display: block;
                	margin: 0 1px 0 0;
                	padding: 2px 6px 3px 6px;
                	background: #359483;				/* Hintergrundfarbe der Menüeinträge	*/
                	color: #FFF;						/* Textfarbe der Menüleiste	*/
                	text-align: center;
                	text-decoration: none;
                	width: 200;
                }
                
                #dropdown ul{
                	margin: 0; 
                	padding: 0;
                    position: absolute;
                    left:  -20px;
                	display: none;
                }
                
                #dropdown li:hover ul {
                    display: block;  /* Unternavigation in modernen Browsern einblenden */
                  }
                #dropdown li a:hover {
                	background: #297164;					/* OnMouseOver-Hintergrund #666	*/
                }
                #dropdown  ul li{
                	float: none;
                	display: block;
                }
                #dropdown a, #dropdown span {
                    display: block;
                    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
                    padding: 0.2em 1em;
                    text-decoration: none; 
                    /*font-weight: bold;*/
                    border: 0px solid black;
                    border-left-color: white; border-top-color: white;
                  }
                
                #dropdown ul ul{
                	position: absolut;
                	top: 0;
                	left: 107px;
                }
                #dropdown ul ul li{
                	display: none;
                }
                #dropdown ul li:hover ul li{
                	display: block;
                }
                In dieser Darstellung erscheint die dritte Ebene des Menüs sehr eingerückt. Ich möchte gerne, dass die dritte Ebene nach folgenden Gesichtspunkten navigiert:

                - Automatisches erkennen der Monitorbreite und bei einer Differenz von rechtem Rand der Seite und Monitor größer als ein Schwellenwert, soll das Menü nach rechts ausfahren, ansonsten nach links.
                - Es soll im ersten Fall automatisch erkennen, wo die zweite Ebene aufhört und direkt dort beginnen, im zweiten Fall soll es erkennen, wo das Menü beginnt und dort enden. (jeweils auf die Breite bezogen)

                Weiß jemand womit ich das realisieren kann? Bzw. wie?


                Zum ersten Habe ich eine Idee. Ich lese die Monitorbreite(Auflösung..) zunächst aus (wie?), da die Seite stets mittig erscheint, halbiere ich beide Werte. Die Seite hat eine Breite von 900px, der Monitor X. So erhalte ich die Breite ab der Mitte: "(900+X)/2". Mittels einer If-Abfrage kann ich dann entscheiden auf welchen Stiltyp der CSS ich verweisen möchte (ID/Class), die jeweilige ID/Class enthält dann die Anweisung wo das Menü auszufahren ist.

                Wie gebe ich also in CSS die Ausfahrrichtung an?

                Zum zweiten Punkt habe ich keine Idee - hier fehlen mir ggf. die Einstellmöglichkeiten.

                Viele Grüße

                Kommentar


                • #9
                  Das mit dem erkennen der Monitorbreite etc kann mit JavaScript gelöst werden dass zuweisen von CSS id's / klassen ganz einfach mit JQuery

                  Kommentar


                  • #10
                    ad1.)
                    wenn du weiter auf javascript vertzichten willst, nimm media-queries; dann haste zwar nur einen set von möglichkeiten aus dem du das passende ziehst und keine genaue berchnung, aber das dürfte ja reichen.
                    ad2.)
                    gibt jeder ebene ne fixe breite und setze die nächste daneben.

                    Kommentar


                    • #11
                      Zitat von moma Beitrag anzeigen
                      ad1.)
                      wenn du weiter auf javascript vertzichten willst, nimm media-queries; dann haste zwar nur einen set von möglichkeiten aus dem du das passende ziehst und keine genaue berchnung, aber das dürfte ja reichen.
                      ad2.)
                      gibt jeder ebene ne fixe breite und setze die nächste daneben.
                      Das mit der fixen breite stellt ein Problem dar. Da die Untermenüs später vom Anwender einfach verändert werden sollen (Einträge in der Datenbank).
                      Dass der Rand des Eintrages automatisch ermittelt wird, geht nicht? Wäre eine tolle Funktion.

                      JavaScript stellt immer so ein Problem dar. Einige Nutzer haben JS deaktiviert, und wenn die Darstellung dann nicht hinhaut, ist das nicht schön. Ich wollte wenigstens die Menüführung ohne JS realisieren. Sollte dies nicht ganz machbar sein, werde ich dann wohl auf JS umsteigen.

                      Viele Grüße und vielen Dank

                      Kommentar


                      • #12
                        Zitat von Shalec Beitrag anzeigen
                        Das mit der fixen breite stellt ein Problem dar. Da die Untermenüs später vom Anwender einfach verändert werden sollen (Einträge in der Datenbank).
                        Und?

                        die fixe breite wird durch css realisiert, hat nichts mit datenbank (markup) zu tun.
                        ist der eintrag zu breit, wird er im besten falle mehrzeilig.

                        Kommentar


                        • #13
                          Zitat von moma Beitrag anzeigen
                          Und?

                          die fixe breite wird durch css realisiert, hat nichts mit datenbank (markup) zu tun.
                          ist der eintrag zu breit, wird er im besten falle mehrzeilig.
                          Genau das Mehrzeilige stellt das Problem dar.

                          Kommentar


                          • #14
                            mir ist jetzt nicht klar wieso, aber dann nimm js;
                            und hoffe dass immer alles hintereinander passt.

                            Kommentar


                            • #15
                              Der Grund hierfür ist nur die Optik, die dem Nutzer nicht gefällt. Mit einer festen Breite wäre es in der Tat wesentlich leichter. Leider hat auch jeder Menüpunkt relativ viele Einträge. So wird es schnell unübersichtlich.

                              Ich erstelle einfach beide Versionen und lasse dann die Wahl.

                              Viele Grüße und danke

                              Kommentar

                              Lädt...
                              X