• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Prośba o kod menu ?

0 głosów
138 wizyt
pytanie zadane 3 września w HTML i CSS przez P0Y3B Nowicjusz (220 p.)
Jak uzyskać efekt:

 

[Menu1] [Menu2] [Menu3] [Menu4]

 

[Lista1][lista1][lista1][lista1][lista1]

[Lista2][lista2][lista2][lista2][lista2]

 

Po najechaniu na [Menu1] ukaże się lista1 lista1 ...

 

Gdy najedziemy na Menu 2 / 3 /4 ... zniknie poprzednia a wyskoczy adekwatna do numeru [ID]

 

Oraz gdy żadna opcja nie jest wybrana to aby Menu1 wraz z lista 1 był wyświetlany 
1
komentarz 3 września przez Tomek Sochacki Mędrzec (188,800 p.)
a probowałeś chociaż w ogóle zacząć szukać w necie... choćby na hasło menu html/css :) ?

2 odpowiedzi

0 głosów
odpowiedź 4 września przez lkobylski Nowicjusz (200 p.)

Spróbuj może samemu powalczyć, zacząć działać z kodem. Jak będą problemy wstaw tutaj kawałki kodu które udało Ci się stworzyć to pomożemy smiley

0 głosów
odpowiedź 11 września przez P0Y3B Nowicjusz (220 p.)
<html>
<head>

<style>
body {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    height: 100%;
    margin: 0;
    background-color: #121212;
    color: #bfbfbf;
}

#container {
	width: 1220px;
    margin: 0 auto;
    text-align: center;
    margin-top: 100px;
}

#main {
	margin: 0;
	padding: 0;
}

#main li {
    display: inline-block;
}

#main li a {
    background: rgba(255, 255, 255, 0.04);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    padding: 9px 25px;
    border-radius: 2px 2px 0px 0px;
    font-weight: bold;
    display: block;
    position: relative;
    text-align: center;
    text-decoration: none;
}

#main li a:hover {
    background: #000000;
    color: #ffffff;
}

#main-1,
#main-2,
#main-3 {
    background: #000;
	margin: 0;
	padding: 0;
}

#main-1 li,
#main-2 li,
#main-3 li {
	display: inline-block;
}

#main-1 li a,
#main-2 li a,
#main-3 li a{
    display: block;
    position: relative;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    padding: 12px 18px 8px;
    color: rgba(53,60,65,0.6);
}


#open-main-1:hover #main-1 {
	display: block;
}

#open-main-2:hover #main-2 {
	display: block;
	}
	
#main-1,
#main-2,
#main-3 {
	display: none;
}
	
#open-main-1:hover #main-1 {display: block;}
#open-main-2:hover #main-2 {display: block;}
#open-main-3:hover #main-3 {display: block;}
</style>

</head>
<body>


<div id="container">

<ul id="main">
	<li><a href="#" id="open-main-1">Odnośnik</a></li>
	<li><a href="#" id="open-main-2">Odnośnik</a></li>
	<li><a href="#" id="open-main-3">Odnośnik</a></li>
</ul>

<ul id="main-1">
	<li><a href="#">Odnośnik ID 1</a></li>
	<li><a href="#">Odnośnik ID 1</a></li>
	<li><a href="#">Odnośnik ID 1</a></li>
	<li><a href="#">Odnośnik ID 1</a></li>
</ul>

<ul id="main-2">
	<li><a href="#">Odnośnik ID 2</a></li>
	<li><a href="#">Odnośnik ID 2</a></li>
	<li><a href="#">Odnośnik ID 2</a></li>
	<li><a href="#">Odnośnik ID 2</a></li>
</ul>

<ul id="main-3">
	<li><a href="#">Odnośnik ID 3</a></li>
	<li><a href="#">Odnośnik ID 3</a></li>
	<li><a href="#">Odnośnik ID 3</a></li>
	<li><a href="#">Odnośnik ID 3</a></li>
</ul>





</body>
</html>

 

Podobne pytania

0 głosów
2 odpowiedzi 119 wizyt
0 głosów
2 odpowiedzi 75 wizyt
pytanie zadane 1 października 2018 w PHP, Symfony, Zend przez daniel2k Obywatel (1,310 p.)
0 głosów
0 odpowiedzi 99 wizyt
pytanie zadane 5 czerwca 2018 w Inne języki przez matbla91 Nowicjusz (120 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

66,495 zapytań

113,266 odpowiedzi

239,870 komentarzy

46,633 pasjonatów

Przeglądających: 262
Pasjonatów: 4 Gości: 258

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...