[es] - Padajuci menu u CSS-u

gojic
Indjija,Srbija

Član broj: 276886
Poruke: 28
*.dynamic.isp.telekom.rs.

Profil

^{22.02.2016. u 12:32 - pre 99 meseci}

POzdrav svima,

Napravio sam padajuci meni u CSS-u, znaci bez JS ili bootstrap-a, cisti CSS. Radi tako sto kad predjem strelicom preko menija otvara se na dole vec pomenuti padajuci meni, i to je to to, radi kako sam zamislio. Problem je u tome kada predjem strelicom misa ispod menija, padajuci meni se takodje otvara?!?

Ne shvatam u cemu je problem evo koda pa ako moze pomoc.

evo linka:

Link

HTML sadrzi samo jednu obicnu "ul" nista specijalno.

Hvala svima na pomoci!

_{[Ovu poruku je menjao gojic dana 22.02.2016. u 15:16 GMT+1]}

Odgovor na temu

dusans
Stojanov Dušan
Pančevo

Član broj: 9551
Poruke: 1343
*.dynamic.sbb.rs.

+311 Profil

Re: Padajuci menu u CSS-u

^{22.02.2016. u 12:43 - pre 99 meseci}

Na prvu loptu, treba da zakucaš max-height ul-a i da mu staviš overflow na visible.
Najbolje da staviš html i css na https://jsfiddle.net/ i postaviš link ovde, pre ćeš dobiti pomoć.

Odgovor na temu

gojic
Indjija,Srbija

Član broj: 276886
Poruke: 28
*.dynamic.isp.telekom.rs.

Profil

Re: Padajuci menu u CSS-u

^{22.02.2016. u 13:11 - pre 99 meseci}

OK. Hvala puno.

evo linka:

Link

_{[Ovu poruku je menjao gojic dana 22.02.2016. u 15:27 GMT+1]}

Odgovor na temu

dusanboss

Član broj: 329401
Poruke: 731
*.dynamic.isp.telekom.rs.

Jabber: dusanboss

+592 Profil

Re: Padajuci menu u CSS-u

^{23.03.2016. u 03:18 - pre 98 meseci}

Problem je što ti je sve u istoj klasi. I dugme i padajuć meni. Morš da ih razdvojiš u dve i da ubaciš još jednu "ul" u kojoj ce biti elementi padjućeg menija. Rešiću ti sutra to mada si se do sad već snašao verovatno

Odgovor na temu

dusanboss

Član broj: 329401
Poruke: 731
*.dynamic.isp.telekom.rs.

Jabber: dusanboss

+592 Profil

Re: Padajuci menu u CSS-u

^{24.03.2016. u 02:28 - pre 98 meseci}

Gojic analizirao sam tvoj padjući meni detaljno i našao problem. Tebi verovatno već to ne treba više, al ajde da napišem. Možda nekome koristi.

1. Ne možeš da praviš dropdown sa "opacity" atributom (barem ja ne znam da može). Umesto "opacity: 0" stavljaš "display:none" , a umesto "opacity:1" ide "display:block"

2. Efekat odvojenih dugmića ne možeš da postigneš sa uvlačenjem margine jer padajući meni popegne kad ideš kursorom na dole. Ja sam postigao tako što sam stvoio beli border oko dogmića. Verovatno ima i drugih načina.

Evo CSS dole ako nekog zanima.

Code:
@charset "UTF-8";
body {
  background-image: url(../images/home.jpg);
  background-repeat: no-repeat;
  height: 100%;
}
* {
  list-style: none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}
.container {
  width: 1000px;
  height: 100%;
  margin: 0px auto;
}
nav ul a {
  color: white;
}
nav ul {
  width: 100px;
  height: 30px;
  margin: 270px 460px;
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #52b3d9;
  text-align: center;
  color: white;
  border-radius: 20px;
}
nav ul li {
  width: 100px;
  height: 30px;
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #52b3d9;
  position: relative;
  top: 17px;
  display: none;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  text-align: center;
  color: white;
  border-radius: 20px;
  border:2px solid white;
}
nav ul:hover li {
  display: block;

}
nav ul li:hover a {
  border-bottom: 2px solid white;
}
li:hover {
  background-color: #19B5FE;
  border-bottom: 2px solid #434141;

}
ul:hover {
  background-color: #19B5FE;
  border-bottom: 2px solid #434141;
}

Dodao bih još da ovo nije baš najbolji način da se naprvi dropdown. Ima dosta nepotrebnih linija. Sem ako autoru iz nekog razloga nije bio potreban CSS baš ovakav kakav jeste u šta sumljam pošto bih rekao da se radi o klasičnoj vežbi.

_{[Ovu poruku je menjao dusanboss dana 24.03.2016. u 13:35 GMT+1]}

Odgovor na temu

dusanboss

Član broj: 329401
Poruke: 731
*.dynamic.isp.telekom.rs.

Jabber: dusanboss

+592 Profil

Re: Padajuci menu u CSS-u

^{26.03.2016. u 14:14 - pre 98 meseci}

Ovaj način gore gubi "fade in - fade out" evekat koji si verovatno hteo da postigneš. Evo kako se on rešava. Ovako čak možeš i da ostaviš marginu jer meni ne stigne da pobegne.

Code:
@charset "UTF-8";
body {
  background-image: url(../images/home.jpg);
  background-repeat: no-repeat;
  height: 100%;
}
* {
  list-style: none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}
.container {
  width: 1000px;
  height: 100%;
  margin: 0px auto;
}
nav ul a {
  color: white;
}
nav ul {
  width: 100px;
  height: 30px;
  margin: 270px 460px;
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #52b3d9;
  text-align: center;
  border-radius: 20px;
}
nav ul li {
  width: 100px;
  height: 30px;
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #52b3d9;
  margin-top: 5px;
  position: relative;
  top: 17px;
  opacity: 0;
  visibility:hidden;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;

  text-align: center;

  border-radius: 20px;
}
nav ul:hover li {
  opacity: 1;
  visibility:visible;
  transition-delay:0s;
}
nav ul li:hover a {
  border-bottom: 2px solid white;

}
li:hover {
  background-color: #19B5FE;
  border-bottom: 2px solid #434141;
}
ul:hover {
  background-color: #19B5FE;
  border-bottom: 2px solid #434141;
}

_{[Ovu poruku je menjao dusanboss dana 28.03.2016. u 03:10 GMT+1]}

Odgovor na temu