+- 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ł: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Rozbudowane menu (/thread-rozbudowane-menu)
Rozbudowane menu - owenidas - 04-12-2011
Witajcie,
Tym razem potrzebuję Waszej pomocy odnośnie menu. Chciałbym, aby moje podstawowe menu mogło być rozwijane w dół, tzn. aby "najeżdżając" np. na Patronat pojawiły się możliwości wejścia na kolejne podstrony. Mniej więcej chodzi mi o efekt taki jaki jest na stronie http://radiorewers.pl/
Moje menu:
Kod PHP:
<ul id="navBar">
<li class="current"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Wasz serwis</a></li>
<li><a href="http://www.free-css.com/">Patronat</a></li>
<li><a href="http://www.free-css.com/">Reklama</a></li>
<li><a href="http://www.free-css.com/">Kontakt</a></li>
</ul>
RE: Rozbudowane menu - Kartofelek - 04-12-2011
Ogólnie robisz tak:
dla li dajesz position:relative:
Kod:
#navBar > li {position:relative;}do któregoś li wstawiasz listę ul (podmenu).
Dajesz jej display:none; position:absolute; top:wysokośćMenuWpx; left:0; widt itp.....;
czyli
Kod:
#navBar > li ul {display:none; position:absolute; top:20px; left:0; width:.....inne style...............................}Kod:
#nacBar > li:hover ul {display:block;}I masz podmenu
RE: Rozbudowane menu - hieroshima - 05-12-2011
za każdy dochód trzeba płacić podatki tyle w teorii
praktyka wygląda całkowicie inaczej
RE: Rozbudowane menu - owenidas - 05-12-2011
Ani trochę nie ogarniam tego zwijanego menu. Posłużyłem się CSS Maker, wybrałem pasujące mi menu i otrzymałem kod:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
<br>
<br>
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
</body>
</html>Natomiast moja strona razem z menu wygląda następująco:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mailo - poznaj muzykę!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header"> <ul id="navBar">
<li class="current"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Wasz serwis</a></li>
<li><a href="http://www.free-css.com/">Patronat</a></li>
<li><a href="http://www.free-css.com/">Reklama</a></li>
<li><a href="http://www.free-css.com/">Kontakt</a></li>
</ul>
</div>
<div id="welcomeMessage">
<img border="0" src="../../../Pictures/Mailologo.jpg" width="465" height="168"></div>
<div id="wrapper">
<div id="secWrapper">
<div id="container" class="clearfix">
<div id="mainCol" class="clearfix">
<h3 id="why"><font size="5">Wasz serwis</font></h3>
<ul id="maincon">
<li class="clearfix">
<img border="0" src="../../music1.jpg" width="267" height="189">
<h2>Mailo powstał po to, by pokazać muzykę od zupełnie innej strony</h2>
<p>Naszym celem jest stworzenie niepowtarzalnej atmosfery serwisu
oraz przedstawienie Wam muzyki w zupełnie niespotykanym jak dotąd
wymiarze! Mailo to przede wszystkim ciekawe wywiady i artykuły, ale
także relacje z najświeższych informacji oraz wydarzeń ze świata
muzyki.</p>
</li>
<li class="clearfix">
<img border="0" src="../../współpraca.jpg" width="256" height="197">
<h2>Współpraca</h2>
<p>Chcesz współtworzyć serwis? Żaden problem!</p>
<p>Jeżeli lubisz pisać artykuły oraz przeprowadzać wywiady czekamy
właśnie na Ciebie! </p>
<p>Skontaktuj się z nami: <font color="#000000"><i>
[email protected]</i></font></p>
</li>
<li class="clearfix">
<img border="0" src="../../ok.jpg" width="204" height="204">
<h2>Interakcja z użytkownikami</h2>
<p>Możesz być pewien, że Twoje zdanie jest dla nas bardzo ważne! Być
może to właśnie Ty sprawisz, że Mailo stanie się lepszym i bardziej
innowacyjnym serwisem dla każdego z Was! Razem twórzmy lepszą jakość
Mailo!</p>
<p>Czekamy na Wasze opinie i spostrzeżenia pod adresem:
<font color="#000000"><i>[email protected]</i></font></p>
</li>
</ul>
</div>
<div id="secCol">
<h3 id="news">Latest News</h3>
<ul>
<li class="clearfix">
<h4><a href="http://www.free-css.com/">News title goes here</a></h4>
<span>19 November, 2008</span>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="http://www.free-css.com/" class="more">Read more</a> </li>
<li class="clearfix">
<h4><a href="http://www.free-css.com/">News title goes here</a></h4>
<span>19 November, 2008</span>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="http://www.free-css.com/" class="more">Read more</a> </li>
</ul>
<h3 id="test">Testimonials</h3>
<ul>
<li class="clearfix">
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="test"><span>Lorem ipsum</span>, <a href="http://www.free-css.com/">dolorsit.com</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Copyrights © 2011 mailo.za.pl, All Rights Reserved Mailo |</p>
</div>
</body>
</html>Kiedy próbuję usunąć moje menu, zastępując je w odpowiednich miejscach wyżej wymienionym kodem, to otrzymuje zwykłą kolumnę menu z jego podstronami, która nie ma nic wspólnego z pierwotnym wyglądem. Gdy próbuję bazować na kodzie otrzymanym od CSS Maker i podpiąć resztę swojej strony, wówczas menu jest takie, jakie być powinno, ale szwankuje cała strona, jej wygląd.
Nie wiem jak sobie z tym poradzić. Zmarnowałem już dłuższy czas i nadal nie wiem co z tym zrobić.
RE: Rozbudowane menu - Kartofelek - 05-12-2011
menu_style.css dograles?
RE: Rozbudowane menu - owenidas - 05-12-2011
Tak, ale popełniłem błąd, który udało mi się wyszukać i wszystko jest OK. Pozmieniane i działające
Dzięki za pomoc