• 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
Forum posiada swój własny serwer Discord, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

66,495 zapytań

113,266 odpowiedzi

239,870 komentarzy

46,634 pasjonatów

Przeglądających: 262
Pasjonatów: 9 Gości: 253

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.

...