jak zrobić rozwijane menu w div start

pytanie zadane 21 marca 2016 w HTML i CSS przez czoperek Obywatel (1,060 p.)

wiem że taki temat już się pojawił ale nie pozbawił mnie on mojego problemu.

Chodzi o te że po naciśnięciu diva start ma mi się wysunąć menu, jednak nie wiem jak to zrobić.

<!DOCTYPE HTML>
<html lang="pl">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <link rel="stylesheet" href="style.css" type="text/css" />

<title>Blog informatyczny</title>

</head>

<body>

	<div id="container">

		<div id="strona">
		</div>
		
			<div id="start">

			</div>
		
		<div id="nav">
			
			<div id="apps">
			
			</div>
			
			<div style="clear: both;"></div>
			</div>
			
		</div>

</body>
</html>

body
{
   background-color: #696969;
}

#container
{
  width: 1000px;
  margin-left: auto;
  margin-right: auto
}

#start
{
	background-color: #00C000;
	float: left;
	width: 70px;
	height: 35px;
}

#strona
{
	background: url(img/pulpit.png);
	width: 1000px;
	height: 603px;
}

#nav
{
	background-color: #474747;
	width: 1000px;
	height: 35px;
}

#apps
{
	float: left;
	width: 500px;
	height: 35px;
}

3 odpowiedzi

odpowiedź 21 marca 2016 przez Mateusz11 Pasjonat (22,910 p.)

odpowiedź 21 marca 2016 przez uRTLy Bywalec (2,420 p.)
edycja 21 marca 2016 przez uRTLy

Możesz zrobić coś takiego.



  document.getElementById('przycisk').onclick= function a(){
          document.getElementsByClassName("lista").item(0).classList.toggle("show");
        };

CSS

.container{
width: 960px;
margin: 0 auto;
background-color: #333;
}
.lista{
  margin: 0 auto;
  list-style-type: none;
  visibility: hidden;

}
.lista li {

}
#przycisk{
  margin: 0 auto;
  text-align: center;
  width: 60px;
  height: 60px;
  background-color: green;
  border: 2px solid black;

}
.show{
  visibility:visible;
}

--------------------------------------------------------------------------------------------------

HTML
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="stylesheet.css"  charset="utf-8">

</head>
<body>

<div class="container">
  <div id="przycisk"> KLIKNIJ MNIE</div>
  <ul class="lista">
    <li>Przykładowy tekst</li>
    <li>Przykładowy tekst</li>
    <li>Przykładowy tekst</li>
    <li>Przykładowy tekst</li>
  </ul>


</div>



  <!-- <script src="javascript.js" charset="utf-8"></script>   tu sobie dołączasz javascripta z reguly w oddzielnym pliku -->
<! --  my zrobimy tym razem w pliku ---- >

<script>


    document.getElementById('przycisk').onclick= function a(){
          document.getElementsByClassName("lista").item(0).classList.toggle("show");
        };



</script>

</body>
</html>

komentarz 21 marca 2016 przez czoperek Obywatel (1,060 p.)

a ten kod wpisać w diva tak?

komentarz 21 marca 2016 przez uRTLy Bywalec (2,420 p.)

kod albo w oddzielnym pliku i dołączasz 

<script src = "twojplik.js" ></script>
albo na końcu pliku przed tagiem </body>
<script>

twój kod

<script>

lepiej oddzielać javascript od htmlu więc preferowane w oddzielnym pliku.

komentarz 21 marca 2016 przez czoperek Obywatel (1,060 p.)

A co mam wpisać w div start?

komentarz 21 marca 2016 przez uRTLy Bywalec (2,420 p.)

Ale co chcesz wpisać?.To tylko sprawia że po kliknieciu diva start klasa .show sie włączy na elementach które chcesz pokazać.

Dajesz na początku elementom(albo ich containerowi) które/któremu chcesz , żeby były nie widoczne w CSS właściwość visibility:hidden; czyli nie widoczne.Potem robisz nową klase .show { visibility:visible; Potem po kliknieciu ten skrypt da im te klase która nadpisze twoj visibility:hidden i da im visibility:visible; czyli się pokaze. Po ponownym kliknięciu znowu będzie hidden i tak w kółko. W HTML masz normalnie zawartość strony i jej budowe a w CSS je stylizujesz. w JavaScripcie dajesz takie pierdoły jak klik i tak dalej. Dużo możesz zrobić takich szałów w CSS ale czasami JS jest niezbędny.

Może przerób najpierw tutoriale od Pana Zelenta albo w3schools tam masz dużo przykładów.

komentarz 21 marca 2016 przez uRTLy Bywalec (2,420 p.)

Edytowałem kod bo we wcześniejszym był błąd. weż przeklej to do siebie na kompie i popatrz jak to działa. a potem zastosuj u siebie. Wiem to jest brzydkie.

odpowiedź 22 marca 2016 przez Shiba Obywatel (1,420 p.)

Mniej więcej tak to będzie, obejrzyj jeszcze raz odc 3 CSS.

W HTML:

<div id="start">
    <ol>
        <li><a href="#">Strona główna</a>
            <ul>
                <li><a href="#">Jakis link1</a></li>
                <li><a href="#">Jakis link2</a></li>
                <li><a href="#">Jakis link3</a></li>
                <li><a href="#">Jakis link4</a></li>
            </ul>
        </li>
    </ol>
</div>

W CSS:

ol
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size: 18px; /* przykładowo */
    height: 35px;
    line-height: 200%;
    display: inline-block;
}

ol a
{
    color: jakiś;
    text-decoration: none;
    display: block;
}

ol > li /* Stylizujemy element li, którego rodzicem jest ol */
{
	float: left;
	width: 150px;
	height: 40px;
	border-right: 1px dashed #jakiskolor;
}

ol > li:first-child /* Opcja strona główna, żeby dodać kreski po lewej */
{
	border-left: 1px dashed #jakiskolor;
}

ol > li:hover
{
	background-color: #jakis;
}

ol > li:hover > a /* ol rodzic li - li rodzic a */
{
	color: #jakis;
}

ol > li > ul 
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px; /* przykladowo */
	display: none; /* Żeby lista menu się schowała */
}

ol > li:hover > ul 
{
	display: block; /* Pokazuj jako element blokowy ' wyświetlaj rozwijane manu' */
}

ol > li > ul > li 
{
	background-color: #jakis;
	position: relative; /* Pozycja relatywna */
	z-index: 100;
	border-top: 1px dashed #jakiskolor;
}

ol > li > ul > li:hover 
{
	background-color: #jakiś;
}

ol > li > ul > li:hover > a
{
	color: #jakiś;
}

komentarz 22 marca 2016 przez czoperek Obywatel (1,060 p.)

jak jak zrobic żeby rozwijało się ku górze?

komentarz 23 marca 2016 przez Shiba Obywatel (1,420 p.)

Spróbuj w pozycji [ ol > li > ul > li ]

position: absolute;
left: 10px;
top: 100px;

lub ewentualnie z left: 0;

Podobne pytania

0 głosów

1 odpowiedź 476 wizyt

Rozwijane menu

pytanie zadane 3 maja 2023 w HTML i CSS przez HUBSON2912 Obywatel (1,300 p.)

0 głosów

1 odpowiedź 291 wizyt

Rozwijane menu

pytanie zadane 18 września 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)

0 głosów

0 odpowiedzi 194 wizyt

Rozwijane menu

pytanie zadane 18 lutego 2021 w HTML i CSS przez Vaul12 Nowicjusz (120 p.)

jak zrobić rozwijane menu w div start

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci