Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji

Strony: [1]
DrukujPobierz PDF
Autor Wątek: Rozwijane MENU w CSS  (Przeczytany 10234 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
Jostys
Użytkownik

Reputacja: -3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 225
Galeria Użytkownika


Kame_sennin ^^


Zobacz profil
« : 11.02.2013, 23:15:14 »

Witam mam pytanie , co do danego menu w css czy ma ktoś pomysł jak zrobić by było ono rozwijane ?
// Mam nadzieje ze dobry dział

HTML
Kod:
<dl id="menudemo11">

<dd><a href="#">1st menu link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>

<dd><a href="#">2nd menu link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>

<dd><a href="#">another link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>

<dd><a href="#">the last link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>

<dt>navigate<span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dt>

</dl>

Kod:
* {

margin: 0;

padding: 0;

}

#menudemo11 {

list-style: none;

width: 100%;

height: 100%;

background: #000;

overflow: hidden;

position: relative;

}

#menudemo11 dd,

#menudemo11 dt {

font-family: arial, sans-serif;

font-size: 10px;

letter-spacing: 1px;

color: #fff;

float: left;

padding: 16px 0 32px 0;

margin: 0 -16px 0 0;

background: url('img/menushadow.gif') bottom no-repeat;

position: relative;

/* little something for IE */

display: inline;

}

#menudemo11 dd:hover {

z-index: 1;

}

#menudemo11 a {

text-decoration: none;

color: #fff;

line-height: 16px;

float: left;

padding: 0 16px;

border-bottom: 1px solid #fff;

outline: none;

}

#menudemo11 a:hover {

color: #4CCED1;

}

#menudemo11 dd .pointer {

display: none;

}

#menudemo11 dd:hover .pointer,

#menudemo11 dt .pointer {

display: block;

position: absolute;

z-index: 1;

left: 50%;

top: 32px;

width: 2000px;

padding: 3px 0 0 0;

background: url('img/menudots.gif') repeat-x;

}

#menudemo11 dt {

line-height: 16px;

border-bottom: 1px solid #fff;

padding: 16px 16px 0 16px;

color: #4CCED1;

background: none;

}

#menudemo11 dt .pointer {

display: block;

border-top: 1px solid #4CCED1;

padding: 2px 0 0 0;

background: none;

z-index: 2;

}

#menudemo11 dd img,

#menudemo11 dt img {

display: block;

border: 0;

position: relative;

left: -3px;

}

#menudemo11 dt:hover img {

display: block;

}
Zapisane

Ziomioslaw
Administrator

Reputacja: 46 Offline Offline

Płeć: Mężczyzna
GIMP: 2.10
JID: ziomioslaw@jabber.org
Licencja: Copyright
Wiadomości: 7 430
Galeria Użytkownika


Cyklista Apokalipsy


Zobacz profil
« Odpowiedz #1 : 12.02.2013, 18:30:50 »

Co znaczy rozwijane? Chodzi Ci o animację tego? Może po prostu znajdź gotowe CSSy do rozwijanego menu - jest tego pewnie trochę na sieci.
Zapisane
Jostys
Użytkownik

Reputacja: -3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 225
Galeria Użytkownika


Kame_sennin ^^


Zobacz profil
« Odpowiedz #2 : 13.02.2013, 11:09:50 »

Zimosław chodzi mi o coś takie by po kliknięciu/najechaniu kursorem zjeżdżało w dół .
Przykład
Zapisane

Ziomioslaw
Administrator

Reputacja: 46 Offline Offline

Płeć: Mężczyzna
GIMP: 2.10
JID: ziomioslaw@jabber.org
Licencja: Copyright
Wiadomości: 7 430
Galeria Użytkownika


Cyklista Apokalipsy


Zobacz profil
« Odpowiedz #3 : 13.02.2013, 17:55:00 »

Na tym twoim przykładzie też się nagle pojawia podmenu, tak jak w Twoim kodzie.
Zapisane
Gacko
Emeryt

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 635
Galeria Użytkownika



Zobacz profil
« Odpowiedz #4 : 13.02.2013, 19:23:17 »

Jostys - jeżeli chcesz by zjeżdżało, a nie pokazywało się natychmiast, to musisz to jakoś zanimować. Są kilka sposobów na to - CSS3 (CSS2 tego nie ogarnia) lub jQuery bądź Flash.
Zapisane
Ziomioslaw
Administrator

Reputacja: 46 Offline Offline

Płeć: Mężczyzna
GIMP: 2.10
JID: ziomioslaw@jabber.org
Licencja: Copyright
Wiadomości: 7 430
Galeria Użytkownika


Cyklista Apokalipsy


Zobacz profil
« Odpowiedz #5 : 13.02.2013, 22:16:29 »

Javascript wystarczy, nie trzeba Flasha. Ale czemu tak wzbraniasz się przed znalezieniem czegoś gotowego?
Zapisane
Jostys
Użytkownik

Reputacja: -3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 225
Galeria Użytkownika


Kame_sennin ^^


Zobacz profil
« Odpowiedz #6 : 14.02.2013, 10:58:48 »

Ziomosław emm gdyż to pasuje mi idealnie do strony chociaż by i dla tego , po 2 jak by ktos mi tu raz podpowiedział mógł bym z tego się czegoś nauczyć .

Dobrotek mógł byś jakiś sposób zapodać ? (do CSS3)
Zapisane

Gacko
Emeryt

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 635
Galeria Użytkownika



Zobacz profil
« Odpowiedz #7 : 14.02.2013, 15:54:56 »

Jostys - na moje oko wystarczy http://www.w3schools.com/css3/css3_animations.asp

Tylko musisz parametry pozmieniać Mrugnięcie CSS3 jeszcze nie jest aż tak dojrzały, by obowiązywał jako standard tak jak CSS2 (albo mam przestarzałe info).

Żeby zobrazować jak działa takie animowanie, polecam zerknąć tutaj:
http://www.css3maker.com/css3-animation.html#


Jeżeli to nic nie pomoże, zerknij sobie do tego tuta:
http://www.red-team-design.com/css3-animated-dropdown-menu

Facet w przejrzysty sposób wyjaśnia co i jak ustawić.
Jeżeli ten komplet Cię nie satysfakcjonuje, polecam poszukać pod ogólnymi hasłami jak: CSS3 animation hover menu
i innymi kombinacjami wyrazów Mrugnięcie

Powodzenia!
Zapisane
Strony: [1]
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aOgólne dyskusjeDyskusjeWebmastering & WebdesignWątek: Rozwijane MENU w CSS
Skocz do: