+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: CSS tworzenie menu (/thread-css-tworzenie-menu)
CSS tworzenie menu - matriks87 - 03-04-2011
Witam, mam takie pytanie jak wybrnąć z tej sytuacji bo nie mogę nic znaleźć próbuje zrobić stronkę w której mam jedno menu poziome np
Kod:
<div id="menu">
<ul>
<li><a href='index.php?akcja=mnie'>O MNIE</a></li>
<li><a href='index.php?akcja=galeria'>GALERIA</a></li>
</ul>
</div>Kod:
#menu ul {
position: absolute;
}
#menu ul li {
float: left;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: transparent #25b #25b #9ce;
}
#menu ul a:link, ul a:visited
{
text-decoration: none;
display: block;
width: 146px;
text-align: center;
padding: 5px 0;
font-weight: bold;
background-color: #27c;
color: #def;
border-top: 10px solid #25b;
}
#menu ul a:hover {
background-color: #28e;
color: #fff;
border-top: 20px solid #26d;
}i chce zrobić podmenu pionowe dostępne tylko np w O MNIE
Kod:
<div id="menu2">
<ul><li><a href='index.php?akcja=dane'>DANE</a></li><ul><br />
<ul><li><a href='index.php?cos='>costam</a></li><ul> <br />
</div>Kod:
#menu2 ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#menu2 ul li {
width: 190px;
padding-left: 10px;
background: #797 url("punkt.gif") no-repeat left top;
border-width: 1px;
border-style: solid;
border-color: #dfe #365 #365 #dfe;
}
#menu2 ul a:link, ul a:visited {
display: block;
width: 169px;
text-decoration: none;
padding: 5px 10px;
font-weight: bold;
background: #bfb url("tlo.gif") repeat-x top;
color: #365;
border-left: 1px solid #797;
}
#menu2 ul a:hover {
background-color: #797;
background-image: url("tlo2.gif");
color: #eff;
}RE: CSS tworzenie menu - Filuper112 - 03-04-2011
Ale chcesz zrobic ze jak nacisniesz na "o mnie" to sie wysunie pod menu czy jak wejdziesz w podstrone "o mnie" to pojawi sie to menu
RE: CSS tworzenie menu - matriks87 - 04-04-2011
chce zrobić tak że jak nacisne to się pojawi nowe menu pionowe pod tym istniejącym na wyżej poziomym
RE: CSS tworzenie menu - Filuper112 - 04-04-2011
Pomysl nad tym
http://www.forumweb.pl/viewtopic.php?t=48799&sid=a66974bf921d4536b07e4775a65a9566
RE: CSS tworzenie menu - matriks87 - 04-04-2011
no tak ale tam jest jedno menu poziome i z niego się wysuwa pionowe a to nie za bardzo będzie pasowało ja chciałbym żeby było mniej więcej jak na tej stronie
http://www.hurtownia.win.pl/tab.php/tab_id/5
menu główne poziome i poniżej menu pionowe które będzie tylko na jednej podstronie i mniej więcej to już osiągnąłem tylko nie wiem czemu jak ustawiam jakieś ccs dla diva menu2 to przypisuje mi go też do diva menu:/ i mi się wtedy rozjeżdża wszystko:/
da się w ogóle tak zrobić jak chce?
RE: CSS tworzenie menu - Kartofelek - 04-04-2011
Kolego - zrób to tak jak się powinno robić. Czyli ul w ul. Bez problemu to zrobisz.
Ul normalnie stylujesz tak jak stylowałeś, dajesz dla LI position relative.
Potem w li umieszczasz podmenu UL i jemu dajesz position:absolute; right:0; display:none;
I gotowe. Oczywiście ma to swoje utrudnienia - np gdy menu jest dłuższe niż część strony pod nim. Ale to też jest do ogarnięcia w kilka linijek.
I teraz mały trik. Dodajesz temu menu drugą klasę. Dla tej drugiej klasy dajesz:
ul#druga_klasa li:hover ul {display:block;} dzięki czemu dla tej drugiej klasy po najechaniu na ul pojawi się podmenu.
W JS usuwasz tą klasę i dodajesz funkcjonalność, że pokazujesz to podmenu po kliknięciu.
Dzięki temu zyskujesz swój efekt, ale nie ograniczasz ludzi bez JS.
RE: CSS tworzenie menu - matriks87 - 04-04-2011
zamieszałem się teraz:/ i już nie wiem jak to w ogóle ruszyć:/
RE: CSS tworzenie menu - Kartofelek - 05-04-2011
Kod:
<ul class="menu menu_hover">
<li><a href=">..</a></li>
<li><a href=">..</a></li>
<li><a href=">..</a></li>
<li><a href=">..</a>
<ul>
<li><a href=">..</a></li>
<li><a href=">..</a>
</ul>
</li>
</ul>I potem dla tego menu dajesz:
.menu li {position:relative;}
.menu li ul {display:none; position:absolute; right:0; top:0;}
.menu_hover li:hover ul {display:block;}
Potem w js
kasujesz temu menu klasę menu_hover i dodajesz zdarzenie click dla LI które pokazuje ci podlistę ul - zupełnie jak w hover.
RE: CSS tworzenie menu - matriks87 - 05-04-2011
czy to js to jest java script, jeśli tak to ja tego nie używam, tylko html php i msql to zrobienia strony
RE: CSS tworzenie menu - Kartofelek - 05-04-2011
Aha. No to nie zrobisz tego co chcesz. Chyba tylko w CSS3, ale to też w najbliższym czasie złe.