✔ vertikales in horizontales Menü verwandeln

Blackylein · 6. September 2005

Hallo!

Ich habe mir ein vertikales Menü gebaut und möchte das jetzt doch horizontal haben. Kann ich das ändern ohne ein neues Menü machen zu müssen?

Code:

 body {
   background-color:   #506173;
   font-family:		Arial, sans-serif;
   font-size:		  10pt;
   color:			  #000000;
   text-align:		 center;
   }
 
 ul {
 	margin:			 0;
 	padding:			0;
 	list-style:		 none;
     width:			  133px; /* Width of Menu Items */
 	border-bottom:	  0px;
   }
 	
 ul li {
 	position:		   relative;
 	}
 	
 li ul {
 	position:		   absolute;
     left:			   132px; /* Set 1px less than menu width */
 	top:				0;
 	display:			none;
 	}
 
   /* Styles for Menu Items */
 ul li a {
 	display:			block;
 	text-decoration:	none;
 	color:			  #777;
 	background:		 #fff; /* IE6 Bug */
 	padding:			0px;
 	border:			 0px;
 	border-bottom:	  0;
 	}
 	
 /* Holly Hack. IE Requirement \*/
 * html ul li { float: left; height: 1%; }
 * html ul li a { height: 1%; }
 /* End */
 
 li:hover ul, li.over ul { display: block; } /* The magic */

Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
 <title>Hier Titel eintragen</title>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
 <link rel="stylesheet" type="text/css" href="css/navi.css">
 <script type="text/javascript" src="drop_down.js"></script>
 </head>
 <body>
 <div>
   <ul>
 	<li><a href="#">Button1</a>
 	  <ul>
 		<li><a href="#">Button1a</a></li>
 		<li><a href="#">Button1b</a></li>
 	  </ul>
 	</li>
 	<li><a href="#">Button2</a>
 	  <ul>
 		<li><a href="#">Button2a</a></li>
 		<li><a href="#">Button2b</a></li>
 	  </ul>
 	</li>
 	<li><a href="#">Button3</a>
 	  <ul>
 		<li><a href="#">Button3a</a></li>
 		<li><a href="#">Button3b</a></li>
 	  </ul>
 	</li>
 	<li><a href="#">Button4</a>
 	  <ul>
 		<li><a href="#">Button4a</a></li>
 		<li><a href="#">Button4b</a></li>
 	  </ul>
 	</li>
 	<li><a href="#">Button5</a>
 	  <ul>
 		<li><a href="#">Button5a</a></li>
 		<li><a href="#">Button5b</a></li>
 	  </ul>
 	</li>
 	<li><a href="#">Button6</a>
 	  <ul>
 		<li><a href="#">Button6a</a></li>
 		<li><a href="#">Button6b</a></li>
 	  </ul>
 	</li>
   </ul>
 </div>
 <?php
 
 ?>
 </body>
 </html>

Ich hoffe ihr könnt mir ein bisschen helfen.
Danke schon Mal!

Maik · 6. September 2005

Mit der CSS-Eigenschaft display: inline lassen sich Listen- / Navigationspunkte horizontal ausrichten:

Code:

li { display: inline; }

Siehe auch Listamatic: Simple horizontal list

Da du eine verschachtelte Liste verwendest, empfehle ich dir Listamatic2: nested list options mit weiteren Demos.

Blackylein · 6. September 2005

und wo genau müsste ich das in meiner CSS Datei ändern? bin momentan ein bisschen ratlos

danke

Maik · 6. September 2005

Code:

ul li a {
 	display:			inline;
 	text-decoration:	none;
 	color:			  #777;
 	background:		 #fff; /* IE6 Bug */
 	padding:			0px;
 	border:			 0px;
 	border-bottom:	  0;
 	}

Blackylein · 6. September 2005

das scheint nicht zu funktionieren

das Bild zeigt vorher (links) - nachher (rechts)

Maik · 6. September 2005

Kann ja auch nicht:

Code:

ul {
         margin:                         0;
         padding:                        0;
         list-style:                 none;
     width:                          133px; /* Width of Menu Items */
         border-bottom:          0px;
   }

Blackylein · 6. September 2005

glaub mir, ich stell mich nicht absichtlich so dumm, aber was genau muss ich daran ändern?

Maik · 6. September 2005

Code:

body {
   background-color:   #506173;
   font-family:                Arial, sans-serif;
   font-size:                  10pt;
   color:                          #000000;
   text-align:                 center;
   }

 ul {
         margin:                         0;
         padding:                        0;
         list-style:                 none;
     width:                          100%; /* Width of Menu Items */
         border-bottom:          0px;
   }

 ul li {
         position:                   relative;
         display: inline;
         }

 li ul {
         position:                   absolute;
     left:                           132px; /* Set 1px less than menu width */
         top:                                0;
         display:                        none;
         }

   /* Styles for Menu Items */
 ul li a {
         display:                        inline;
         text-decoration:        none;
         color:                          #777;
         background:                 #fff; /* IE6 Bug */
         padding:                        0px;
         border:                         0px;
         border-bottom:          0;
         }

 /* Holly Hack. IE Requirement \*/
 * html ul li { float: left; height: 1%; }
 * html ul li a { height: 1%; }
 /* End */

 li:hover ul, li.over ul { display: block; } /* The magic */

Blackylein · 6. September 2005

super
jetzt müsstest du es nur noch hinbekommen, dass die unterpunkte unter dem Menü erscheinen und nicht rechts davon

Maik · 6. September 2005

Sollte so funktionieren:

Code:

body {
   background-color:   #506173;
   font-family:                Arial, sans-serif;
   font-size:                  10pt;
   color:                          #000000;
   text-align:                 left;
   }

 ul {
         margin:                         0;
         padding:                        0;
         list-style:                 none;
          border-bottom:          0px;

   }

 ul li {
         position:                   relative;
         display: inline;
         }

 li ul {
         position:                   absolute;
         left:                           0px; 
         top:                                20px;
         display:                        none;
         }

   /* Styles for Menu Items */
 ul li a {
         display:                        inline;
         text-decoration:        none;
         color:                          #777;
         background:                 #fff; /* IE6 Bug */
         padding:                        0px;
         border:                         0px;
         border-bottom:          0;
         }

 /* Holly Hack. IE Requirement \*/
 * html ul li { float: left; height: 1%; }
 * html ul li a { height: 1%; }
 /* End */

 li:hover ul, li.over ul { display: inline; } /* The magic */

Anmerkung: für den IE-Browser ist Javascript erforderlich, um die Submenüs ein- und auszublenden.

Sie hierzu auch die genannten Links in deinem Thema Dynamische Navigation.

✔ vertikales in horizontales Menü verwandeln

Blackylein

Erfahrenes Mitglied

Maik

Blackylein

Erfahrenes Mitglied

Maik

Blackylein

Erfahrenes Mitglied

Anhänge

Maik

Blackylein

Erfahrenes Mitglied

Maik

Blackylein

Erfahrenes Mitglied

Maik

Neue Beiträge