Autor Zpráva
Veverka
Profil *
#1 · Zasláno: 13. 1. 2012, 17:35:21
Odpovědět Citovat
Ahoj,
Ráda bych se naučila jak udělat dvouúrovňové vertikální menu pomocí php tak aby po kliknutí na první úroveň mi to rozbalilo podmenu.
Menu budu mít nějaké takovéto tři hlavní úrovně a první dvě mají podmenu, které by se ukázalo až po kliknutí: 
<div id="leve-menu">
  <ul class="menu">
    <li><a href=" " title=" "><span>Šperky</span></a></li>
       <ul>
         <li><a href=" " title=" ">Náušnice</a></li>
       </ul>
       <ul>
         <li><a href="" title="">Náramky</a></li>
       </ul>
    <li><a href=" " title=""><span>Drátěné</span></a></li>
       <ul>
         <li><a href=" " title=" ">Ozdoby</a></li>
       </ul>
       <ul>
         <li><a href="" title="">Andělé</a></li>
       </ul>
    <li><a href=" " title=""><span>Stromy</span></a></li>
</ul>
</div>

Můžete mi prosím někdo poradit jak to udělat, případně nějaký tutorial kde je to popsané, googlem sem nic nenašla.
Děkuji Verča
tatyalien
Profil
#2 · Zasláno: 13. 1. 2012, 22:36:49
Odpovědět Citovat
Kdysi jsem to řešil z téhle stránky. Styl css si pak jen upravíš dle svého přání.
Veverka
Profil *
#3 · Zasláno: 14. 1. 2012, 00:50:43
Odpovědět Citovat
Ale tady to asi není pomocí PHP ale pomocí javascriptu a nebo jenom CSS. Ja bych chtela aby jsem to mela propojeno s databazi a to rozbalovani bylo delano taky pres PHP.
Alphard_
Profil *
#4 · Zasláno: 14. 1. 2012, 01:19:21
Odpovědět Citovat
Veverka:
Shrnující článek Metody ukládání stromových dat. Traverzování kolem stromu, které jinak vždy doporučuji, prakticky detailně popisoval Jakub Vrána na svém blogu, ale ve vašem případě je to asi zbytečně složité.

Pro popsaný případ bych zůstal u toho, že se podkategorie budou odkazovat na kategorie pomocí id rodiče. Obecně je ale práce (tím myslím i administraci) se stromovými strukturami pracná, jestli dopředu víte, že v tom menu nebude ani 10 položek, udělal bych to co nejjednodušeji.
Veverka
Profil *
#5 · Zasláno: 14. 1. 2012, 09:30:30
Odpovědět Citovat
Myslela jsem že bych to dělala pouze nějak formou tabulky kde bych rozlišovala hlavní kategorii a vedlejší, a pak to nějak tahala. To by nešlo? Budu mít poze dvě úrovně. Nebo musím vždy použít ty stromová data? To my přije dost složité. Děkuji
Alphard_
Profil *
#6 · Zasláno: 14. 1. 2012, 09:55:46
Odpovědět Citovat
Veverka:
Traverzování je poměrně složité, řešení pomocí parentId je jednoduché a pro 2 úrovně dostačující. Takže bych ho použil, jak jsem psal výše.
Dvě tabulky si můžete samozřejmě udělat, ale nevidím v tom zjednodušení, jedna tabulka je prakticky stejná. Když je parentId null, jde o kategorii hlavní, když je tam nějaké číslo, je to nějaká podkategorie. Jednodušeji to nejde.
Veverka
Profil *
#7 · Zasláno: 14. 1. 2012, 10:08:26
Odpovědět Citovat
Jasně tomáte pravdu jedna bude stačit, takže budu mít třeba hlavní kategorie s parentId 0 a podkategorie kde bude id 1 ale moc nerozím tomu jakým výpisem to mám dostat z DB abych to propojila s tím mím menu?
tatyalien
Profil
#8 · Zasláno: 14. 1. 2012, 11:20:41 · Upravil/a: tatyalien
Odpovědět Citovat
Veverka:
Je to čistě pomocí css, php si na to jen napojíš, co může uživatel vidět. Například část menu jen pro admina, přihlášeného uživatele atd...
Pokud by jsi tahala data z dtb, tak si je pak ve while projdeš a sestavíš do té podoby ul - li... ul...
Veverka
Profil *
#9 · Zasláno: 14. 1. 2012, 18:08:46
Odpovědět Citovat
[#8] tatyalien Aha, asi tuším co máš na mysli takže do toho mého menu co jsem zde uváděla míso šperky dám nějakou podmínku z DB aby mi to vytáhla? Nemohl by jsi mi prosím napsat nějakou ukázku abych to z toho lépe pochopila?
Veverka
Profil *
#10 · Zasláno: 14. 1. 2012, 22:07:40
Odpovědět Citovat
Udělala jsem si to menu a nastylovala. Teď byh chtěla dosáhnout toho aby mi menu rozbalilo tu druhou úroveň až po kliknutí a zůstalo rozbalené do dalšího kliknutí na jiný odkaz v menu - Pomocí PHP. a další věc jak bych tam tedy správně měla vkládat ty údaje z DB? 
<head>
 <style>
    div#menu-zbozi {color: #9c0093; background-color: #8eccfb; width: 350px; padding: padding: 30px 0px 0px 0px;}
    div#menu-zbozi ul {background-color: #6caad9; margin: 0; padding: 0;}
    div#menu-zbozi li { list-style: none; margin: 0; padding: 0;}                
    div#menu-zbozi li a {color: #9c0093; font-size: 14px; font-weight: bold; text-decoration: none; display: block; width: 250px; padding: 6px 0px 6px 20px;}            
    div#menu-zbozi li a:hover, div#menu-zbozi a:focus {background-color: #7dbbea;}
    div#menu-zbozi li.aktivni {background-color: #b4dfff; margin: 0; padding: 0;}
    div#menu-zbozi ul ul{width: 390px; margin: 1px 0px 0px 23px; padding: 0px;}
    div#menu-zbozi ul ul li{list-style: none; font-size: 13px; text-align: left; color: #1e78cc;}
    div#menu-zbozi ul ul li a{text-decoration: none; color: #c4c3ff; font-weight: normal; }
    div#menu-zbozi ul ul li a:hover{text-decoration: none; color: #0E3961;}
 </style>
</head>
<body>
<?php include "config.php"; // zde je include souboru s konstantami?>
<?php
if (!isset($_GET['stranka'])) {
 $stranka = "uvod";
 } else {
 $stranka = $_GET['stranka'];
 } 
?>
<?php
   echo "<div id='menu-zbozi'>
          <ul>
             <li";
                 if ($stranka=="sperky") { 
                    echo " class='aktivni'";
                                         }
                    echo "><a href='leva-menu.php?stranka=sperky'>sperky</a>
             </li>
                 <ul>
                    <li";
                        if ($stranka=="nausnice") { 
                            echo " class='aktivni'";
                                                  }
                            echo "><a href='leva-menu.php?stranka=nausnice'>nausnice</a>
                    </li>
                 </ul>
                 <ul>
                    <li";
                        if ($stranka=="naramky") { 
                            echo " class='aktivni'";
                                                  }
                            echo "><a href='leva-menu.php?stranka=naramky'>naramky</a>
                    </li>
                 </ul>   
             <li";
                 if ($stranka=="stromy") { 
                    echo " class='aktivni'";
                                         }
                    echo "><a href='leva-menu.php?stranka=stromy'>stromy</a>    
             </li>
                 <ul>
                    <li";
                        if ($stranka=="briza") { 
                            echo " class='aktivni'";
                                                }
                            echo "><a href='leva-menu.php?stranka=briza'>briza</a>
                    </li>
                 </ul>  
          </ul>
         </div>";
 ?> 
</body>
</html>
Alphard
Profil
#11 · Zasláno: 15. 1. 2012, 00:35:23
Odpovědět Citovat
Veverka:
Já si nejsem jistý, jestli si rozumíme, ale ukázka v [#10] je statická. Opravdu chcete položky menu načítat z databáze, nebo vám jde jenom o efekt rozkliknutí a jinak bude celé menu staticky v html?
Veverka
Profil *
#12 · Zasláno: 15. 1. 2012, 08:04:01
Odpovědět Citovat
Alphard:
Ano chtěla bych je načítat z DB + efekt rozklknutí. V DB jsem si udělala tabulku ale nevím jak a ka přesně ty údaje vypisovat + to rozkliknutí: 
CREATE TABLE IF NOT EXISTS `katagorie` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nazev` varchar(250) NOT NULL,
  `id_uroven` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) TYPE=MyISAM  AUTO_INCREMENT=14 ;

A data v tabulce: 
INSERT INTO `katagorie` (`id`, `nazev`, `id_uroven`) VALUES
(1, 'sperky', 0),
(2, 'nausnice', 1),
(3, 'naramky', 1),
(4, 'stromy', 2),
(13, 'briza', 3);
Časová prodleva: 12 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0