Czy wiecie może jak osiągnąć taki oto efekt? O tutaj. Ogólniej mówiąc to poszukuje właśnie skryptów tego typu, jeden już mam (ten co na stronie - jest z Dynamic Drive'a), ale inne również się przydadzą
Jeśli macie coś podobnego, wrzucajcie tutaj.[JS] Menu z "panelami"
Moderator: Pomocy?!
Posty: 9
• Strona 1 z 1
[JS] Menu z "panelami"
autor: yarek » 24 stycznia 2006, 10:39
Przeglądarka: Opera/8.51 (Windows NT 5.1; U; en)
Witam,
Czy wiecie może jak osiągnąć taki oto efekt? O tutaj. Ogólniej mówiąc to poszukuje właśnie skryptów tego typu, jeden już mam (ten co na stronie - jest z Dynamic Drive'a), ale inne również się przydadzą Jeśli macie coś podobnego, wrzucajcie tutaj.
Czy wiecie może jak osiągnąć taki oto efekt? O tutaj. Ogólniej mówiąc to poszukuje właśnie skryptów tego typu, jeden już mam (ten co na stronie - jest z Dynamic Drive'a), ale inne również się przydadzą
Jeśli macie coś podobnego, wrzucajcie tutaj.- yarek
autor: Stef » 24 stycznia 2006, 13:58
Przeglądarka: Mozilla/5.0 (X11; U; GNU/Linux i686; pl; rv:1.8) Gecko/20051111 Firefox/1.5
Ładnie ostylowane menu na listach ze zmianą koloru karty dla onmouseover i rowinięciem listy. Tak właśnie się powinno robić menu swoją drogą. A konkretnych przykładów poszukaj np. poprzez google.
Czasami coś napiszę na stef.log
- Stef
- Moderator
- Posty: 3466
- Z nami od: 16 kwietnia 2004, 11:05
autor: yarek » 24 stycznia 2006, 18:31
Przeglądarka: Opera/8.51 (Windows NT 5.1; U; en)
No dobra, mam już pewną koncepcje Nie będe zakładał nowego tematu żeby nie zaśmiecać, zrobie mały offtop tutaj 
Problem jest taki: teoretycznie 2 divy powinny się układać zaraz pod sobą, prawda? Wkońcu to elementy blokowe. Tutaj prezentuje kod (CSS nie wklejam bo nie ma nic specjalnego tam):
[url="http://www.yds.neostrada.pl/nowemenu/index.htm]Wynik[/url] jest dosyć dziwaczny, divy siedzą praktycznie w tym samym miejscu...
Nie będe zakładał nowego tematu żeby nie zaśmiecać, zrobie mały offtop tutaj Problem jest taki: teoretycznie 2 divy powinny się układać zaraz pod sobą, prawda? Wkońcu to elementy blokowe. Tutaj prezentuje kod (CSS nie wklejam bo nie ma nic specjalnego tam):
- Kod: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<title>OsC Template beta</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="menu-up">
<ul id="tabs">
<li><a href="#">o nas</a></li>
<li><a href="#">Pomoc</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Cennik</a></li>
<li><a href="#">Opcje</a></li>
</ul>
</div>
<div id="menu-down"> </div>
</body>
</html>
[url="http://www.yds.neostrada.pl/nowemenu/index.htm]Wynik[/url] jest dosyć dziwaczny, divy siedzą praktycznie w tym samym miejscu...
- yarek
autor: Tomek » 25 stycznia 2006, 16:08
Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5
hm... 20 sekund zajęło mi wysłanie zapytania do googli i znalezienie wyników. za ciekawe uznałem to:
http://www.alistapart.com/articles/hybrid
http://www.alistapart.com/articles/hybrid
"Mym sojusznikiem jest Moc, i potężnym sojusznikiem ona jest." -- Mistrz Yoda
- Tomek
- Moderator
- Posty: 9041
- Z nami od: 19 sierpnia 2004, 06:52
autor: yarek » 25 stycznia 2006, 17:34
Przeglądarka: Opera/8.51 (Windows NT 5.1; U; en)
Tak, wiem 
Chciałem uzyskać tylko jakieś wskazówki, teraz mam tylko poblem czysto-techniczny. Niestety co się dzieje w moim kodzie, wynik nie jest zbyt estetyczny: o tutaj. Te dwa divy powinny się ułożyc jeden pod drugim... a one siedzą w tym samym miejscu. [/url]
Chciałem uzyskać tylko jakieś wskazówki, teraz mam tylko poblem czysto-techniczny. Niestety co się dzieje w moim kodzie, wynik nie jest zbyt estetyczny: o tutaj. Te dwa divy powinny się ułożyc jeden pod drugim... a one siedzą w tym samym miejscu. [/url]- yarek
autor: Zajec » 26 stycznia 2006, 16:36
Przeglądarka: Opera/8.51 (X11; Linux i686; U; en)
Nic w tym dziwnego. Cała zawartość div'a #menu-up to elementy z nadanym float - a więc nie wpływają na wyokość rodzica.
#menu-up:after { display: block; clear: both; content: ""; }
#menu-up:after { display: block; clear: both; content: ""; }
- Zajec
- Posty: 167
- Z nami od: 17 grudnia 2004, 22:32
- Lokalizacja: Włocławek
autor: yarek » 29 stycznia 2006, 17:00
Przeglądarka: Opera/8.51 (Windows NT 5.1; U; en)
To związanie również nie jest zbyt dobre. Po wnikliwym przeanalizowaniu kodu na stronie, którą podałem wcześniej jest pewna mała sztuczka - dość podstępna, ale nie działa na wszystkich przeglądarkach, np. na IE. Nie chce się już rozpisywać na ten temat ... Nadal mam problem jak zmusić diva żeby automatycznie przyjął wysokość elementu, który jest w środku.
No i właśnie chciałbym, żeby div #menu-up przyjmował wysokość linka, ale to chyba raczej niemożliwe - wszystkie linki mają float: left
- Kod: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<title>OsC Template beta</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="menu-up">
<a href="#">o nas</a>
<a href="#">Pomoc</a>
<a href="#">Kontakt</a>
<a href="#">Cennik</a>
<a href="#">Opcje</a>
</div>
</body>
</html>
- Kod: Zaznacz cały
body {
margin: 0;
padding: 0;
text-align: center;
}
#menu-up {
margin: 0 auto;
width: 600px;
text-align: left;
border-left: 5px solid #4A4A4A;
border-right: 5px solid #4A4A4A;
background-color: #E9E7D7;
height: 200px;
}
#menu-up a {
background-color: #E54B16;
color: #FFFFFF;
font-family: Verdana;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
font-size: 8pt;
padding: 15px;
display: block;
float: left;
}
#menu-up a:hover {
background-color: #E9E7D7;
color: #404040;
}
No i właśnie chciałbym, żeby div #menu-up przyjmował wysokość linka, ale to chyba raczej niemożliwe - wszystkie linki mają float: left
- yarek
autor: Gedi » 30 stycznia 2006, 23:59
Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8) Gecko/20051111 Firefox/1.5
No jak dałeś dla #menu-up wysokość na 200px, to jak chcesz aby przyjął wysokość linka? Usuń 'height: 200px;'. Nie wiem, czy o to Ci chodzi, ale Zajec wspomniał, że FLOAT nie wpływa na wysokość rodzica i abyś uzyskał to co chcesz, kolejny element musi wyczyścić floatowanie, np.:
Czy o to chodziło? Tak na marginesie, lepiej takie menu zrób na listach.
- Kod: Zaznacz cały
// CSS
.clear {
clear: both;
}
// HTML
<div id="menu-up">
<a href="#">o nas</a>
<a href="#">Pomoc</a>
<a href="#">Kontakt</a>
<a href="#">Cennik</a>
<a href="#">Opcje</a>
<div class="clear"></div>
</div>
Czy o to chodziło? Tak na marginesie, lepiej takie menu zrób na listach
.- Gedi
- Posty: 324
- Z nami od: 10 sierpnia 2003, 17:36
Posty: 9
• Strona 1 z 1
Kto jest online
Zarejestrowani użytkownicy: Bing [Bot], Google [Bot]