php multilevel menu

Tue, 16 Oct 2012 12:56:14 GMT

Hejsa.

Jeg skal til at lave en multilevel menu, men jeg er lidt i tvivl om hvor jeg skal starte henne. Databasen indeholder, menu_id, menu_name, menu_parent. Den(menuen) skal fungere s�dan at n�r man klikker p� en hovedmenu, popper det som tilh�rer menuen op under hoved menuen.

Den skal helst v�re i ren php. Ikke noget Jquery/javascript.

VH Simon

CSS multilevel dropdown menu

Fri, 04 May 2012 02:20:14 GMT

Hej

Jeg kan ikke rigtigt f� dette til at fungere korrekt.

Jeg fors�ger at f� den f�rste undermenu's venstre side til at flugte med topmenuen's links venstre side. og den anden undermenu's f�rste menu punkt til at ligge ud for pilen.

H�ber det giver mening.

Ellers kort sagt: Multilevel dropdown menu i ren CSS.

Dette er min css fil:

CSS kode

 nav {
     width: 900px;
     margin: 0 auto;
 }
 
 nav ul {
     position: relative;
     float: left;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 997;
 }
 
 nav ul li {
     display: block;
     
     padding-top: 5px;
     padding-left: 15px;
     padding-right: 15px;
     padding-bottom: 5px;
     
     margin-top: 4px;
     margin-left: 2px;
     margin-right: 2px;
     margin-bottom: 4px;
     
     border: 1px solid #000000;
     float: left;
     
     text-align: center;
     vertical-align: middle;
 }
 
 nav ul li:hover {
     background-color: #cccccc;
 }
 
 .submenu {
     background-image: url('arrow-down.jpg');
     background-repeat: no-repeat;
     background-position: right center;
     background-size: 15px 15px;
 }
 
 nav ul li ul {
     display: none;
 }
 
 nav ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 998;
 }
 
 nav ul li:hover ul li {
     display: block;
     
     padding-top: 5px;
     padding-left: 5px;
     padding-right: 15px;
     padding-bottom: 5px;
     
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     
     border: 1px solid #000000;
     float: none;
     
     text-align: left;
     vertical-align: middle;
 }
 
 .subsubmenu {
     background-image: url('arrow-right.jpg');
     background-repeat: no-repeat;
     background-position: right center;
     background-size: 15px 15px;
 }
 
 nav ul li:hover ul li ul {
     display: none;
 }
 
 
 nav ul li:hover ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 999;
 }
 
 nav ul li:hover ul li:hover ul li {
     display: block;
     
     padding-top: 5px;
     padding-left: 5px;
     padding-right: 15px;
     padding-bottom: 5px;
     
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     
     border: 1px solid #000000;
     float: none;
     
     text-align: left;
     vertical-align: middle;
 }

Dette er min HTML kode:

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
     
     <meta name="description" content="B44 CMS" />
     <meta name="keywords" content="HTML,HTML5,CSS,CSS3,PHP,MySQL,B44,CMS" />
     <meta name="author" content="Jacob Christensen" />
     <meta charset="UTF-8" />
     
     <title>B44 CMS - menu.html</title>
     
     <link rel="stylesheet" type="text/css" href="reset.css" />
     <link rel="stylesheet" type="text/css" href="menu.css" />
     
 </head>
 
 <body>
     
 <nav>
     
     <ul>
         <li><a href="#">[topmenu 1]</a></li>
         <li><a href="#">[topmenu 2]</a></li>
         <li class="submenu"><a href="#">[topmenu 3]</a>
             <ul>
                 <li><a href="#">[submenu 3.1][submenu 3.1]</a></li>
                 <li><a href="#">[submenu 3.2]</a></li>
                 <li class="subsubmenu"><a href="#">[submenu 3.3]</a>
                     <ul>
                         <li><a href="#">[submenu 3.3.1]</a></li>
                         <li><a href="#">[submenu 3.3.2]</a></li>
                         <li><a href="#">[submenu 3.3.3]</a></li>
                         <li><a href="#">[submenu 3.3.4]</a></li>
                         <li><a href="#">[submenu 3.3.5]</a></li>
                     </ul>
                 </li>
                 <li class="subsubmenu"><a href="#">[submenu 3.4]</a>
                     <ul>
                         <li><a href="#">[submenu 3.4.1]</a></li>
                         <li><a href="#">[submenu 3.4.2]</a></li>
                         <li><a href="#">[submenu 3.4.3]</a></li>
                         <li><a href="#">[submenu 3.4.4]</a></li>
                         <li><a href="#">[submenu 3.4.5]</a></li>
                     </ul>
                 </li>
                 <li><a href="#">[submenu 3.5]</a></li>
             </ul>
         </li>
         <li class="submenu"><a href="#">[topmenu 4]</a>
             <ul>
                 <li><a href="#">[submenu 4.1]</a></li>
                 <li><a href="#">[submenu 4.2]</a></li>
                 <li><a href="#">[submenu 4.3]</a></li>
                 <li><a href="#">[submenu 4.4]</a></li>
                 <li class="subsubmenu"><a href="#">[submenu 4.5]</a>
                     <ul>
                         <li><a href="#">[submenu 4.5.1]</a></li>
                         <li><a href="#">[submenu 4.5.2]</a></li>
                         <li><a href="#">[submenu 4.5.3]</a></li>
                         <li><a href="#">[submenu 4.5.4]</a></li>
                         <li><a href="#">[submenu 4.5.5]</a></li>
                     </ul>
                 </li>
             </ul>
         </li>
         <li><a href="#">[topmenu 5]</a></li>
     </ul>
     
 </nav>
     
 </body>
 
 </html>

Her er menu'en som den ser ud nu: Link

Jeg har fors�gt, at �ndre dette:

CSS kode

 nav ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 998;
 }

Til dette:

CSS kode

 nav ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     top: 100%;
     left: 0;
     
     z-index: 998;
 }

Resultat: Link

Og dette:

CSS kode

 nav ul li:hover ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     z-index: 999;
 }

Til dette:

CSS kode

 nav ul li:hover ul li:hover ul {
     display: block;
     position: absolute;
     float: none;
     background-color: #00FF00;
     list-style: none;
     margin: 0;
     padding: 0;
     
     top: 1px;
     left: 99%;
     
     z-index: 999;
 }

Resultat: Link

PHP Multilevel menu

Mon, 20 Feb 2012 17:24:16 GMT

Hejsa.

Jeg skal til lave mig en multilevel menu, og m� indr�mme at jeg ikke er god nok til php til selv
at kunne lave den . Eks. til struktur:

Se menu struktur ved at klikke her

Har s�gt lidt rundt p� nettet, og n�sten alle de eksempler jeg har fundet fungerer ikke som jeg vil ha' det.
Menuen skal v�re databasestyret, dvs. brugeren skal selv kunne oprette menupunkterne og smide produkter i dem, og det skal v�re ren php/html (helst intet js). Har i en id� til en l�sning?

Venlig Hilsen
Simon Duun

Udvikleren.dk - Seneste [multilevel] forum tr�de

php multilevel menu

CSS multilevel dropdown menu

PHP Multilevel menu