Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

Rozwijane menu - potrzebna pomoc.


Najlepsza odpowiedź Yeoman, 19 kwietnia 2014 - 17:00

Na początek poleciłbym zbudować to menu na listach.

<ul class="navigation">
  <li id="przycisk">
    <a href="">Home</a>
  </li>
  <li id="przycisk2">
    <a href="">STYLE</a>
  </li>
  <li id="przycisk">
    <a href="">Kontakt</a>
  </li>
</ul>

Jeśli chodzi o menu rozwijane to musisz dodać do itemu, kolejną, zagnieżdżoną listę menu. Przykład:

<ul class="navigation">
  <li id="przycisk">
    <a href="">Home</a>
    <ul class="subnav">
      <li class="sublink">
        <a href="#">sublink</a>
      </li>
    </ul>
  </li>
  <li id="przycisk2">
    <a href="">STYLE</a>
  </li>
  <li id="przycisk">
    <a href="">Kontakt</a>
  </li>
</ul>

Domyślnie w CSS dajesz aby .subnav był ukryty czyli:

.subnav { display: none; }

A po najechaniu na rodzica dajesz w tym przypadku:

#przycisk:hover > .subnav { display: block; }

Oczywiście będziesz musiał ostylować takowe menu przykładowo na wyświetlanie absolutne względem rodzica.

Menu dla tego przykładu: http://jsfiddle.net/DV7Pk/1/

 

Pozdrawiam :)

Przejdź do postu


2 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
Krzycho

    Nowy użytkownik

  • 13 postów
    • Czas spędzony online: 8m 25s
0
Neutralna

Napisano 19 kwietnia 2014 - 16:23

#1

Potrzebuję pomoc, nie - nie jestem początkującym, mam już nawet dużo za sobą. Jednakże nigdy nie bawiłem się rozwijanym menu, więc proszę o pomoc, bo mi nie wychodzi. Otóż div PRZYCISK2 (jest tylko jeden - napis STYLE) po najechaniu ma rozwijać kilka podpunktów pod nim. Tutaj macie stronę www.krzycho.esy.es - możecie sobie przez nią podejrzeć kod css, jak i html. Z góry dzięki za pomoc.


  • 0

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 19 kwietnia 2014 - 17:00   Najlepsza odpowiedź

#2

Na początek poleciłbym zbudować to menu na listach.

<ul class="navigation">
  <li id="przycisk">
    <a href="">Home</a>
  </li>
  <li id="przycisk2">
    <a href="">STYLE</a>
  </li>
  <li id="przycisk">
    <a href="">Kontakt</a>
  </li>
</ul>

Jeśli chodzi o menu rozwijane to musisz dodać do itemu, kolejną, zagnieżdżoną listę menu. Przykład:

<ul class="navigation">
  <li id="przycisk">
    <a href="">Home</a>
    <ul class="subnav">
      <li class="sublink">
        <a href="#">sublink</a>
      </li>
    </ul>
  </li>
  <li id="przycisk2">
    <a href="">STYLE</a>
  </li>
  <li id="przycisk">
    <a href="">Kontakt</a>
  </li>
</ul>

Domyślnie w CSS dajesz aby .subnav był ukryty czyli:

.subnav { display: none; }

A po najechaniu na rodzica dajesz w tym przypadku:

#przycisk:hover > .subnav { display: block; }

Oczywiście będziesz musiał ostylować takowe menu przykładowo na wyświetlanie absolutne względem rodzica.

Menu dla tego przykładu: http://jsfiddle.net/DV7Pk/1/

 

Pozdrawiam :)


  • 2

2ed58r7.png


Krzycho

    Nowy użytkownik

  • 13 postów
    • Czas spędzony online: 8m 25s
0
Neutralna

Napisano 19 kwietnia 2014 - 17:13

#3

Wielkie dzięki, nauczyłem się dzięki Tobie. :)


  • 0





Podone tematy Collapse

  Temat Forum Autor Podsumowanie Ostatni post

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych