Zaloguj się

owenidas · 04-12-2011, 19:34

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> 

**Kartofelek** · (Ten post był ostatnio modyfikowany: 04-12-2011, 21:52 przez Kartofelek.)

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...............................}

potem dajesz

Kod:
#nacBar > li:hover ul {display:block;}

czyli jeżeli najedziesz na LI to podmenu ma być display:block - czyli się pokazać

I masz podmenu Smile

hieroshima · 05-12-2011, 00:14

za każdy dochód trzeba płacić podatki tyle w teorii Wink

praktyka wygląda całkowicie inaczej Smile

owenidas · 05-12-2011, 19:53

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"> &nbsp;<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ć.

**Kartofelek** · 05-12-2011, 20:34

menu_style.css dograles?

owenidas · 05-12-2011, 21:46

Tak, ale popełniłem błąd, który udało mi się wyszukać i wszystko jest OK. Pozmieniane i działające Wink

Dzięki za pomoc

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie