Dodanie rozwijanego menu

0

Cześć wszystkim

Mam pytanie, jak przerobić moje obecne menu na takie aby po kliknięciu na pozycję link 1 wysunęło się pod nim submenu z subkategoriami.

https://scr.hu/ZBgor6g

<div class="barnav">
          			<li><a href="/">link 1 </a></li>
          			<li><a href="/moi-raboty/tvorchestvo/">link 2</a></li>

          			<li><a href="/moi-raboty/peredelkino/">link 3</a></li>					
          			<li><a href="/rip/dle/">link 4</a></li>
                      <li><a href="/rip/ragnarok-online/">link 5</a></li>
          			<li><a href="/main/">link 6</a></li>
                      <li><a href="/index.php?do=feedback">Kontakt</a></li>
			</div>

.barnav a {
background: #DEDCD1;
border: solid 1px #CFCEC4;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 4px 0px rgba(255, 255, 255, 0.6);
box-shadow: 0px 1px 4px 0px rgba(255, 255, 255, 0.6);
text-shadow: 0 1px 1px white;
padding: 6px;
width: 266px; 
margin-bottom:5px;
float:left;
color:#666;
font-weight:bold;
}

.barnav a:hover {
color: #666;
background: #f0f0f0;
}
1

Na kilka różnych sposobów. Np tak:

<!DOCTYPE html>
<html>

<head>
  <style>
  .przycisk > UL {
    display:none;
  }

  .przycisk:focus > UL {
    display:block;
  }
  </style>
</head>

<body>

<ul>
  <li tabindex="0" class="przycisk">
    bez linku (bo i tak, albo klikiem rozwijasz menu, albo idziesz do linku)
    <ul>
      <li><a href="/moi-raboty/tvorchestvo/">link 2</a></li>
      <li><a href="/moi-raboty/peredelkino/">link 3</a></li>                  
      <li><a href="/rip/dle/">link 4</a></li>
      <li><a href="/rip/ragnarok-online/">link 5</a></li>
      <li><a href="/main/">link 6</a></li>
      <li><a href="/index.php?do=feedback">Kontakt</a></li>
    </ul>
   </li>
</ul>

</body>
</html>
0

Dziękuje za odzew. Menu się rozwija, ale żeby je zwinąć trzeba kliknąć gdzieś poza menu i "przycisk" to sam napis: https://scr.hu/e5BY34j a chciałbym żeby wyglądał tak samo jak odnośniki nad nim np. Kontakt, link 6 itd.

0
pkee napisał(a):

Dziękuje za odzew. Menu się rozwija, ale żeby je zwinąć trzeba kliknąć gdzieś poza menu

A jak byś chciał inaczej, skoro aktywujesz kliknięciem?
Chyba, że zdecydujesz się wszystko podpiąć pod onhover.

i "przycisk" to sam napis: https://scr.hu/e5BY34j a chciałbym żeby wyglądał tak samo jak odnośniki nad nim np. Kontakt, link 6 itd.

Możesz go ostylować css-em tak samo jak linki.

0

Ogólnie jak klikam w dowolny link z tej rozwijanej listy to ona się zwija i dalej mnie nie przenosi.

0
pkee napisał(a):

Ogólnie jak klikam w dowolny link z tej rozwijanej listy to ona się zwija i dalej mnie nie przenosi.

Hm... racja. No to po drobnej poprawce:

<!DOCTYPE html>
<html>
 
<head>
  <style>
  .przycisk > UL {
    display:none;
  }
 
  .przycisk:focus > UL,
  .przycisk > UL:hover {
    display:block;
  }
  </style>
</head>
 
<body>
 
<ul>
  <li tabindex="0" class="przycisk">
    bez linku (bo i tak, albo klikiem rozwijasz menu, albo idziesz do linku)
    <ul>
      <li><a tabindex="0" href="moi-raboty/tvorchestvo/">link 2</a></li>
      <li><a href="moi-raboty/peredelkino/">link 3</a></li>                  
      <li><a href="rip/dle/">link 4</a></li>
      <li><a href="rip/ragnarok-online/">link 5</a></li>
      <li><a href="main/">link 6</a></li>
      <li><a href="index.php?do=feedback">Kontakt</a></li>
    </ul>
   </li>
</ul>
 
</body>
</html>

Albo używając odmiennej metody:

<!DOCTYPE html>
<html>
 
<head>
  <style>
  #menu_rozwijane {
    display: none;
  }

  #menu_rozwijane:target {
    display: block;
  }
  </style>
</head>
 
<body>
 
<ul>
  <li>
    <a href="#menu_rozwijane">[rozwiń menu]</a>
    <ul id="menu_rozwijane">
      <li><a href="#ukryj">[ukryj menu]</a></li>    
      <li><a href="moi-raboty/tvorchestvo/">link 2</a></li>
      <li><a href="moi-raboty/peredelkino/">link 3</a></li>                  
      <li><a href="rip/dle/">link 4</a></li>
      <li><a href="rip/ragnarok-online/">link 5</a></li>
      <li><a href="main/">link 6</a></li>
      <li><a href="index.php?do=feedback">Kontakt</a></li>
    </ul>
  </li>
</ul>
 
</body>
</html>
0

Wszystko działa, ale czemu jak dodam takie samo menu pod spodem to po kliknięciu rozwija się to pierwsze, a drugie nie.
edit: już to ogarnąłem

A da się to zrobić tak żeby jeden przycisk służył zarówno do rozwijania i zwijania menu?

0
pkee napisał(a):

A da się to zrobić tak żeby jeden przycisk służył zarówno do rozwijania i zwijania menu?

W zasadzie nie (a przynajmniej nie tą metodą), ale da się zrobić tak, żeby wyglądało, że to jest ten sam przycisk:

<!DOCTYPE html>
<html>
 
<head>
  <style>
  .przycisk_pokaz ~ UL.menu,
  .przycisk_pokaz ~ .przycisk_ukryj {
    display:none;
  }
  
  .przycisk_pokaz:focus {
    display:none;
  }
 
  .przycisk_pokaz:focus ~ UL.menu,
  .przycisk_pokaz ~ UL.menu:hover {
    display:block;
  }
  
  .przycisk_pokaz:focus ~ .przycisk_ukryj {
    display:list-item;
  }
  </style>
</head>
 
<body>
 
<ul>
  <li tabindex="0" class="przycisk_pokaz">przycisk pokaz</li>
  <li class="przycisk_ukryj">przycisk zamknij</li>
  <ul class="menu">
    <li><a tabindex="0" href="moi-raboty/tvorchestvo/">link 2</a></li>
    <li><a href="moi-raboty/peredelkino/">link 3</a></li>                  
    <li><a href="rip/dle/">link 4</a></li>
    <li><a href="rip/ragnarok-online/">link 5</a></li>
    <li><a href="main/">link 6</a></li>
    <li><a href="index.php?do=feedback">Kontakt</a></li>
  </ul>
</ul>
 
</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1