dle
PopUp meniu naudojant CSS - HTML ir CSS dizainas - Affiliate.lt

Jump to content


Photo
- - - - -

PopUp meniu naudojant CSS


  • Please log in to reply
15 replies to this topic

#1 kreoton

kreoton

    Senior Member

  • Members
  • 136 posts

Posted 02 May 2007 - 07:39 AM

Jau praeina tie laikai nuo griozdiðko ir neðvaraus kodo raðymo, ðiuo straipsneliu padëiu dar truputá apvalyti jûsø kodà, nuo papildomo Javascript darant popup meniu.

Pirmiausiai mums reiktø pasiraðyti meniu struktûrà.


<ul class="menu">
<li><a href="#">Pirmas Elementas</a></li>
<li>
<a href="#">Antras Elementas</a>
<ul>
<li><a href="#">Pirmas SubElemantas</a></li>
<li><a href="#">Antras SubElemantas</a></li>
<li><a href="#">Treèias SubElemantas</a></li>
</ul>
</li>
<li>
<a href="#">Treèias Elementas</a>
<ul>
<li><a href="#">Pirmas SubElemantas</a></li>
<li><a href="#">Antras SubElemantas</a></li>
<li><a href="#">Treèias SubElemantas</a></li>
</ul>
</li>
<li><a href="#">Ketviras Elementas</a></li>
</ul>


Viskà apraðome su CSS

body {
	font-family:tahoma;
	font-size:12px;
}
ul.menu {
	width:150px;
	list-style:none;
}
ul.menu li {
	background:#234B7F;
	padding:3px;
	line-height:20px;
	text-align:center;
	border:1px solid #FFFFFF;
}
ul.menu li a {
	color:#FFFFFF;
	text-decoration:none;
}
ul.menu li a:hover {
	color:#D4D0C8;
	text-decoration:underline;
}
ul.menu li ul {
	left:157px;
	position:absolute;
	list-style:none;
	display:none;
        width:150px;
}
ul.menu li:hover ul { display: block; }

ul.menu li:hover ul li ul { display: none; }

ul.menu li ul li:hover ul { display: block; }

Rezultatas matomas èia: http://www.affiliate...eniu/menu1.html

Taèiau yra viena problemëlë, taip tai Internet Explorer'is, jis nepripaþysta :hover niekam iðskyrus <a> gairei. Bet visgi yra gudriø þmoniø :) tam panaudojam nediduka css hover hack apie kurá galit plaèiau pasiskaityti ir já parsisiøst cia http://www.xs4all.nl...d/csshover.html

Tagi iádedam failiukà csshover.htc ten pat kur yra meniu ir prie esamo css kodo pridedam:

body {
behavior: url(csshover.htc);
}

Galutinis rezultatas (deja nespëjau visiðkai sutvarkyti css): http://www.affiliate...eniu/menu2.html


------------------------------------------
Affiliate.lt Kopijuojant butina nurodyti ðaltiná
Affiliate.lt staff

#2 Vitkauskas

Vitkauskas

    Senior Member

  • Members
  • 226 posts

Posted 25 May 2007 - 06:44 AM

seip gerai padarei kad sita daikta parasei bet su Adobe fireworks galima geriau ir greiciau sita daikta pafdaryti!

#3 kreoton

kreoton

    Senior Member

  • Members
  • 136 posts

Posted 25 May 2007 - 07:01 AM

seip gerai padarei kad sita daikta parasei bet su Adobe fire forks galima geriau ir greiciau sita daikta pafdaryti!


Labai bûtø ádomu suþinoti kaip, gal bût paraðytum koká tutorialà? :)
Affiliate.lt staff

#4 Vitkauskas

Vitkauskas

    Senior Member

  • Members
  • 226 posts

Posted 25 May 2007 - 07:22 AM

As truolu nerasau vienintelis mano truolas neatsimenu kur idejau xD
Na nebent kartais

#5 ivrasabuvrasas

ivrasabuvrasas

    Junior Member

  • Members
  • Pip
  • 8 posts

Posted 05 July 2007 - 04:36 PM

Nesuprantu, viska padariau kaip ir saket(gal), bet ant IE man vistiek neveikia. gal galite perziureti kur klaidos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
	font-family:tahoma;
	font-size:12px;
	behavior: url(csshover.htc);
}
ul.menu {
	width:150px;
	list-style:none;
}
ul.menu li {
	background:#234B7F;
	padding:3px;
	line-height:20px;
	text-align:center;
	border:1px solid #FFFFFF;
}
ul.menu li a {
	color:#FFFFFF;
	text-decoration:none;
}
ul.menu li a:hover {
	color:#D4D0C8;
	text-decoration:underline;
	}
ul.menu li ul {
	left:157px;
	position:absolute;
	list-style:none;
	display:none;
        width:150px;
}
ul.menu li:hover ul { display: block; }

ul.menu li:hover ul li ul { display: none; }

ul.menu li ul li:hover ul { display: block; }

</style>
</head>
<body>
<ul class="menu">
	<li><a href="#">Pirmas Elementas</a></li>
	<li>
		<a href="#">Antras Elementas</a>
		<ul>
			<li><a href="#">Pirmas SubElemantas</a></li>
			<li><a href="#">Antras SubElemantas</a></li>
			<li><a href="#">Treèias SubElemantas</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Treèias Elementas</a>
		<ul>
			<li><a href="#">Pirmas SubElemantas</a></li>
			<li><a href="#">Antras SubElemantas</a></li>
			<li><a href="#">Treèias SubElemantas</a></li>
		</ul>
	</li>
	<li><a href="#">Ketviras Elementas</a></li>
</ul>
</body>
</html>


#6 Vitkauskas

Vitkauskas

    Senior Member

  • Members
  • 226 posts

Posted 05 July 2007 - 05:02 PM

Veikia kazka tu netaip padarei

#7 ivrasabuvrasas

ivrasabuvrasas

    Junior Member

  • Members
  • Pip
  • 8 posts

Posted 05 July 2007 - 05:33 PM

O gal galit perziuret koda? ir pasakyti kas netaip?

#8 ivrasabuvrasas

ivrasabuvrasas

    Junior Member

  • Members
  • Pip
  • 8 posts

Posted 10 July 2007 - 06:26 PM

Gal pasirodysiu nemandagus, bet ra kas nors galite padeti issiaiskinti klaida anksciau pateiktame kode?

#9 Lucas

Lucas

    Senior Member

  • Members
  • 162 posts

Posted 10 July 2007 - 07:12 PM

Gal pasirodysiu nemandagus, bet ra kas nors galite padeti issiaiskinti klaida anksciau pateiktame kode?


Nurodyk tinklapi, kuriame jau ádëtas kodas.

#10 ivrasabuvrasas

ivrasabuvrasas

    Junior Member

  • Members
  • Pip
  • 8 posts

Posted 11 July 2007 - 08:21 AM

Na, as dar nesukuriau puslapio, as dar tik sukuriau pabandymui html faila, kurio koda matote auksciau. Sio failo negaliu dabar ideti, nes esu ne prie ano kompo.

#11 Lucas

Lucas

    Senior Member

  • Members
  • 162 posts

Posted 11 July 2007 - 11:13 AM

Na, as dar nesukuriau puslapio, as dar tik sukuriau pabandymui html faila, kurio koda matote auksciau. Sio failo negaliu dabar ideti, nes esu ne prie ano kompo.


Na tai neskubëk atsakinëti. Ádëtis kai busi prie PC.

#12 ivrasabuvrasas

ivrasabuvrasas

    Junior Member

  • Members
  • Pip
  • 8 posts

Posted 13 July 2007 - 03:42 PM

As nesuprantu:confused:, as prasaiu tik patikrinti koda, nieko naujo net prisedes prie savo PC neprideciau. Taigi noriu, akd paaiskintumete kur cia klaida, kad nera to popup menu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
	font-family:tahoma;
	font-size:12px;
	behavior: url(csshover.htc);
}
ul.menu {
	width:150px;
	list-style:none;
}
ul.menu li {
	background:#234B7F;
	padding:3px;
	line-height:20px;
	text-align:center;
	border:1px solid #FFFFFF;
}
ul.menu li a {
	color:#FFFFFF;
	text-decoration:none;
}
ul.menu li a:hover {
	color:#D4D0C8;
	text-decoration:underline;
	}
ul.menu li ul {
	left:157px;
	position:absolute;
	list-style:none;
	display:none;
        width:150px;
}
ul.menu li:hover ul { display: block; }

ul.menu li:hover ul li ul { display: none; }

ul.menu li ul li:hover ul { display: block; }

</style>
</head>
<body>
<ul class="menu">
	<li><a href="#">Pirmas Elementas</a></li>
	<li>
		<a href="#">Antras Elementas</a>
		<ul>
			<li><a href="#">Pirmas SubElemantas</a></li>
			<li><a href="#">Antras SubElemantas</a></li>
			<li><a href="#">Treèias SubElemantas</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Treèias Elementas</a>
		<ul>
			<li><a href="#">Pirmas SubElemantas</a></li>
			<li><a href="#">Antras SubElemantas</a></li>
			<li><a href="#">Treèias SubElemantas</a></li>
		</ul>
	</li>
	<li><a href="#">Ketviras Elementas</a></li>
</ul>
</body>
</html>


#13 ivrasabuvrasas

ivrasabuvrasas

    Junior Member

  • Members
  • Pip
  • 8 posts

Posted 16 July 2007 - 08:48 AM

Nu va jau grizau prie savo PC. Va kodas, kuri paemiau paziurejes wiew source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
	font-family:tahoma;
	font-size:12px;
	behavior: url(csshover.htc);
}
ul.menu {
	width:150px;
	list-style:none;
}
ul.menu li {
	background:#234B7F;
	padding:3px;
	line-height:20px;
	text-align:center;
	border:1px solid #FFFFFF;
}
ul.menu li a {
	color:#FFFFFF;
	text-decoration:none;
}
ul.menu li a:hover {
	color:#D4D0C8;
	text-decoration:underline;
	}
ul.menu li ul {
	left:157px;
	position:absolute;
	list-style:none;
	display:none;
        width:150px;
}
ul.menu li:hover ul { display: block; }

ul.menu li:hover ul li ul { display: none; }

ul.menu li ul li:hover ul { display: block; }

</style>
</head>
<body>
<ul class="menu">
	<li><a href="#">Pirmas Elementas</a></li>
	<li>
		<a href="#">Antras Elementas</a>
		<ul>
			<li><a href="#">Pirmas SubElemantas</a></li>
			<li><a href="#">Antras SubElemantas</a></li>
			<li><a href="#">Treèias SubElemantas</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Treèias Elementas</a>
		<ul>
			<li><a href="#">Pirmas SubElemantas</a></li>
			<li><a href="#">Antras SubElemantas</a></li>
			<li><a href="#">Treèias SubElemantas</a></li>
		</ul>
	</li>
	<li><a href="#">Ketviras Elementas</a></li>
</ul>
</body>
</html>
Tai dabar jau galite padeti???

#14 Lucas

Lucas

    Senior Member

  • Members
  • 162 posts

Posted 16 July 2007 - 02:40 PM

Nu va jau grizau prie savo PC. Va kodas, kuri paemiau paziurejes wiew source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
font-family:tahoma;
font-size:12px;
behavior: url(csshover.htc);
}
ul.menu {
width:150px;
list-style:none;
}
ul.menu li {
background:#234B7F;
padding:3px;
line-height:20px;
text-align:center;
border:1px solid #FFFFFF;
}
ul.menu li a {
color:#FFFFFF;
text-decoration:none;
}
ul.menu li a:hover {
color:#D4D0C8;
text-decoration:underline;
}
ul.menu li ul {
left:157px;
position:absolute;
list-style:none;
display:none;
width:150px;
}
ul.menu li:hover ul { display: block; }

ul.menu li:hover ul li ul { display: none; }

ul.menu li ul li:hover ul { display: block; }

</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Pirmas Elementas</a></li>
<li>
<a href="#">Antras Elementas</a>
<ul>
<li><a href="#">Pirmas SubElemantas</a></li>
<li><a href="#">Antras SubElemantas</a></li>
<li><a href="#">Treèias SubElemantas</a></li>
</ul>
</li>
<li>
<a href="#">Treèias Elementas</a>
<ul>
<li><a href="#">Pirmas SubElemantas</a></li>
<li><a href="#">Antras SubElemantas</a></li>
<li><a href="#">Treèias SubElemantas</a></li>
</ul>
</li>
<li><a href="#">Ketviras Elementas</a></li>
</ul>
</body>
</html>

Tai dabar jau galite padeti???


IE Ðio kodo nepalaiko. Kad jis veiktø ir IE narðyklëje reikia pridëti ir csshover.
Tagi ádedam failiukà csshover.htc ten pat kur yra meniu ir prie esamo css kodo pridedam:
body {
behavior: url(csshover.htc);
}


Daugiau apie csshover gal pasiskaityti èia http://www.xs4all.nl...d/csshover.html

#15 ivrasabuvrasas

ivrasabuvrasas

    Junior Member

  • Members
  • Pip
  • 8 posts

Posted 16 July 2007 - 06:21 PM

hm, vistiek nieko nesupratau is jusu paaiskinimo, bet visdelto padariau savu metodu...

#16 ivrasabuvrasas

ivrasabuvrasas

    Junior Member

  • Members
  • Pip
  • 8 posts

Posted 17 July 2007 - 08:37 AM

Bet, o kurioje vietoje reikia sutvarkyti koda, kad ant IE uzejus ant fono taip pat islystu subelementai, nu ne tik, kad uzejus tik ant raidziu...




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users