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

jak zrobić rozwijane menu w div start

Aruba Cloud - Virtual Private Server VPS
0 głosów
1,483 wizyt
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

0 głosów
odpowiedź 21 marca 2016 przez Mateusz11 Pasjonat (22,910 p.)
Poczytaj o ul li (listach numerowanych,i  listach nienumerowanych)
0 głosów
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.
0 głosów
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ź 657 wizyt
pytanie zadane 3 maja 2023 w HTML i CSS przez HUBSON2912 Obywatel (1,480 p.)
0 głosów
1 odpowiedź 424 wizyt
pytanie zadane 18 września 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)
0 głosów
0 odpowiedzi 231 wizyt
pytanie zadane 18 lutego 2021 w HTML i CSS przez Vaul12 Nowicjusz (120 p.)

93,336 zapytań

142,332 odpowiedzi

322,418 komentarzy

62,672 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...