Меню на css

okunev2 · November 13, 2007

Как лучше сделать меню на css?

Есть ячейки в таблице, там будет резаться верстка, когда наводишь на картинку, подгружается дргуая! Подскажите самы рабочий код, плиз!

klierik · November 13, 2007

ну вот для примера хоть б так

<!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=windows-1251" />
<title>Untitled Document</title>

<style type="text/css">

.menu ul {list-style:none;}
.menu li {float:left;}
.menu a {text-decoration:none;}
.menu li.clear {clear:both;}
</style>

</head>

<body>

	<!-- menu -->
	<div class="menu">
		<ul>
			<li><a href="#"><img src="images/menu-button-home.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/menu-button-about.jpg" alt="" title="" /></a></li>
			...
			<li class="clear"></li>
		</ul>
	</div>

</body>
</html>

зы: по поводу li.clear - это по желанию

okunev2 · November 13, 2007

не работает

klierik · November 13, 2007

что не работает?

okunev2 · November 13, 2007

не понял, ты меня

мне похожее меню нужно на css, видишь там у мен я картинка, у меню меню расположено горизонтально, когда наводишь например на один из пунктов меню, то подгружается новая картинка!

okunev2 · November 13, 2007

нашел http://www.htmlbook.ru/content/?id=110

klierik · November 13, 2007

аа.. ты про это.

=) =) =)

okunev2 · November 13, 2007

да, но все же есть свои косяки в этом, нужно дорабатывать

okunev2 · November 13, 2007

вот интересная инфа по такому меню: http://neveragainblog.com.ua/archives/63

coldman · November 13, 2007

ещо меню http://www.cssplay.co.uk/menus/

okunev2 · November 13, 2007

Мужики вот код, как сделать чтобы меню было не вертикальное, а горизонатльное?

html:

<html>
 <head>
<link href="style.css" rel="stylesheet" type="text/css">
 </head>

 <body>
		<div class="menu">
				<a class="home" href="#"></a><a class="blog" href="#"></a><a class="autor" href="#"></a>
		</div>
 </body>
</html>

css:

.menu ,.menu a{
width:114px;
height:36px
}
.menu a{
display:block;
background-repeat:no-repeat;
background-position: 0 0;
}
.menu a:hover{
background-position: 0 -36px;
}
.menu .home{
background-image:url(images/menu-home.gif);
}
.menu .blog{
background-image:url(images/menu-blog.gif);
}
.menu .autor{
background-image:url(images/menu-avtor.gif);
}

okunev2 · November 13, 2007

help me!

coldman · November 13, 2007

сходи по линку который я тебе дал, там менюшек этих хоть греблю делай )))

coldman · November 13, 2007

постав ашке а {float:left;}

Scrum · November 13, 2007

вот интересная инфа по такому меню: http://neveragainblog.com.ua/archives/63

статья не интересная ибо в первом случае использует то же эффект перекатывания (http://www.htmlbook.ru/content/?id=110) во втором подключения JS

да, но все же есть свои косяки

какие например ? (хотелось бы поня что вам надо)

okunev2 · November 13, 2007

постав ашке а {float:left;}

куда именно, чот не помогло

coldman · November 13, 2007

http://www.dynamicdrive.com/style/csslibra...lid-block-menu/ почти твоя менюха

думай логично, если у тебя стоит display:block; ты знаеш что это значыт?

правильно , то что твоя ашка стала блоком, а два блока можно поставит в один ряд когда первому или всем стоит float:left; .

Тебе надо учить елементарние вещи а не братся за дело, не понимая сути елементарних вещей

okunev2 · November 13, 2007

Учим

strenger · November 19, 2007

http://www.dynamicdrive.com/style/csslibra...lid-block-menu/ почти твоя менюха
думай логично, если у тебя стоит display:block; ты знаеш что это значыт?
правильно , то что твоя ашка стала блоком, а два блока можно поставит в один ряд когда первому или всем стоит float:left; .
Тебе надо учить елементарние вещи а не братся за дело, не понимая сути елементарних вещей

А как сделать, наподоби этого меню, что бы при нажатии, еще горизонтально открывались менюшки? типо как тут - http://lineage2.free.fr/

Sign In

Меню на css

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information