Всплывающее меню

slava03 · May 13, 2011

У меня вопрос про меню. Помогите, люди добрые.

Как это горизонтальное всплывающее меню сделать шестиуровневым? Друг попросил, а я не умею.

<HTML>
<head>
     <title>hover</title>
     <style type="text/css">
     UL {width:800px; list-style:none; margin:0; padding:0; font-family:Arial,sans-serif; font-size:10pt;}
     UL li {position:relative;display:inline-block;}
     li UL {position:absolute; display:none; top:20; left:0px; z-index:1;}
	 li A {display:block; width:100%; padding:5px; text-decoration:none; color:#666;
border:1px solid #ccc; background-color:#f0f0f0; border-bottom: none;}
     li A:hover {color:#ffe;	background-color:#5488af;}
	 li:hover UL {display:block;}
	 .brd{border-bottom:1px solid #ccc;}
	 li ul li{
	 display:block;
	 width:180px;
	 	 }
	#third{
	display:none;
	top:0;
	left:179px;

	}	 
	#two:hover #third{
	display:block;

	}
	 </style>
</head>
<body>
	<UL  id="menu">
     <li><a href="1.html">111111</a>
	     <UL>

	        <li id="two"><a href="2.html">222222</a>
				     <UL id="third">
	        <li><a href="2.html">222222</a></li>
	        <li><a href="3.html">333333</a></li>
	        <li><a href="4.html">444444</a></li>
		    <li><a href="5.html" class="brd">555555</a></li>

	     </UL>

			</li>
	        <li><a href="3.html">333333</a></li>
	        <li><a href="4.html">444444</a></li>
		    <li><a href="5.html" class="brd">555555</a></li>
	     </UL>
	 </li>

	 <li><a href="1.html">111111</a>
         <UL>
	     <li><a href="2.html">222222</a></li>
	     <li><a href="3.html">333333</a></li>
	     <li><a href="4.html">444444</a></li>
		 <li><a href="5.html" class="brd">555555</a></li>

	     </UL>
	     <li><a href="1.html">111111</a>
         <UL>
	     <li><a href="2.html">222222</a></li>
	     <li><a href="3.html">333333</a></li>
	     <li><a href="4.html">444444</a></li>
		 <li><a href="5.html" class="brd">555555</a></li>

	     </UL>
         </li>
     </li>
	 <li><a href="1.html">111111</a></li>
	 </UL>
</body>
</HTML>

Edited May 13, 2011 by slava03

psywalker · May 13, 2011

Ахренеть можно. Зачем друг просит делать аж 6-и уровневое меню человека, который не умеет делать и 2-ух?

Softlink · May 13, 2011

как по мне, так 6-ти уровневое меню это уже перебор. Надо думать над навигацией лучше и структурой материала. Либо совмещать пункты, либо еще что-то.

Ваш друг не подумал, каково пользователю искать ссылку в шестом уровне и думать, а не вылезет ли еще седьмой?

Edited May 13, 2011 by Softlink

slava03 · May 13, 2011

Ахренеть можно. Зачем друг просит делать аж 6-и уровневое меню человека, который не умеет делать и 2-ух?

История следующая: он попросил сделать это в отделе разработки той фирмы, где он работает, но там сославшись на занятость его мягко говоря "завернули".

как по мне, так 6-ти уровневое меню это уже перебор. Надо думать над навигацией лучше. Либо совмещать пункты, либо еще что-то.
Ваш друг не подумал, каково пользователю искать ссылку в шестом уровне и думать, а не вылезет ли еще седьмой?

Да, я понимаю, что это не самая стандартная задача. Но другом ничего не было сказано про какие-нибудь изыски с дизайном, только чтобы из приведенного выше кода сделать код меню с шестью уровнями. Надеюсь здесь есть специалист, который споосбен это осуществить.

Edited May 13, 2011 by slava03

psywalker · May 13, 2011

Тогда начни с малого. Для начала сверстай хотя бы двух-уровневое меню. Только приведи код в порядок, сделай всё красиво. Покажешь потом и уже будем думать дальше.

Softlink · May 13, 2011

надеюсь здесь есть специалист, который споосбен это осуществить.

завтра попробую поковырять - сегодня уже поздно. А оно вертикальное или горизонтальное должно быть?

p.s. а пока попробуйте поискать на всяких блогах - часто выкладывают такие извращения в качестве примеров

buddah · May 13, 2011

Включаем логику: в примере первое меню имеет 4 подменю. Назовем их подменю2. Из них первое подменю2 имеет также 4 подменю3.

меню меню меню меню
|
|
подменю2 --подменю3
подменю2   подменю3
подменю2   подменю3
подменю2   подменю3

Это трех-уровневая структура. Тебе нужно сделать 6 уровней, при чем для каждого элемента. Это monkey job, никто такой фигней страдать не будет, а если будет - памятник ему надо.

В общем я веду к тому, что чтоб это сделать - нужно понять аналогию, а не быть гуру хтмл.

Но мне кажется, что твой друг просто реально шутит над тобой

slava03 · May 14, 2011

завтра попробую поковырять - сегодня уже поздно.

Ясное дело, ночью спать надо.))) Спасибо Вам за ответ.

А оно вертикальное или горизонтальное должно быть?

Оно должно быть горизонтальное. Горизонтальное всплывающее меню с шестью уровнями.

p.s. а пока попробуйте поискать на всяких блогах - часто выкладывают такие извращения в качестве примеров

Дело в том, что вполне возможно придется долго искать, а мне к понедельнику надо. Вернее другу надо.

Temiks · May 14, 2011

http://htmlbook.ru/css/hover

Temiks · May 14, 2011

как то так


<!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">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link type="text/css" href="css/style.css" rel="stylesheet" />
        <style type="text/css" >
            a {
               display: block;
            }
            .menu, ul {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }
            .menu li {
                min-width: 100px;
                text-align: center;
                padding: 0;
                margin: 0;
                float: left;
                background: yellow;
            }
            .menu li .list_1 {
                position: absolute;
                display: none;
            }
            .menu li .list_1 li {
                padding: 0;
                background: red;
                float: none;
            }
            .menu li:hover .list_1 {
                display: block;
            }
            .menu li .list_2 {
                position: absolute;
                display: none;
                margin: -20px 0 0 100px;
            }
            .menu li .list_2 li {
                background: lavender;
            }
            .menu .list_1 li:hover .list_2 {
                display: block;
            }
            .menu li .list_1 li .list_2 li .list_3 {
                background: lightsalmon;
                display: none;
                position: absolute;
                margin: -20px 0 0 100px;
            }
            .menu li .list_1 li .list_2 li .list_3 li {
                background: sandybrown;
            }
            .menu li .list_1 li .list_2:hover li .list_3 {
                display: block;
            }
        </style>

</head>
<body>
    <ul class="menu" >
        <li>
            <a href="#">Главная</a>
            <ul class="list_1" >
                <li>
                    <a href="#">Ссылка 1</a>
                    <ul class="list_2" >
                        <li>
                            <a href="#">Ссылка 2</a>
                            <ul class="list_3" >
                                <li>
                                    <a href="#">Ссылка 3</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Ссылка 2</a>
                        </li>
                        <li>
                            <a href="#">Ссылка 2</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Ссылка 1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Главная</a>
        </li>
    </ul>
</body>
</html>

slava03 · May 14, 2011

У меня было три уровня, в Вашем варианте их стало 4, я правильно понял?

Softlink · May 14, 2011

напиши почту, отправлю меню

Temiks · May 14, 2011

У меня было три уровня, в Вашем варианте их стало 4, я правильно понял?

я вам сделал 3-х уровневое меню, по такой же схеме можно сделать и 6-и уровневое

slava03 · May 14, 2011

напиши почту, отправлю меню

charm08@mail.ru

я вам сделал 3-х уровневое меню, по такой же схеме можно сделать и 6-и уровневое

Спасибо за помощь. Полную версию того, что необходимо сделать мне на e-mail уже отправил Softlink, за что ему большое спасибо. Надеюсь я не слишком напряг его в выходной день.

Edited May 14, 2011 by slava03

Softlink · May 14, 2011

Спасибо за помощь. Полную версию того, что необходимо сделать мне на e-mail уже отправил Softlink, за что ему большое спасибо. Надеюсь я не слишком напряг его в выходной день.

не за что. Все равно делать нечего сегодня.

А вы учитесь искать и разбираться в найденном. Это не уникальное меню и таких уже много сделано. Берите любое и настройте для себя. Тем более если сроки критичны.

Edited May 14, 2011 by Softlink

Temiks · May 14, 2011

Softlink так выложите решение сюда, может кому нибудь ваше решение станет полезным

Softlink · May 14, 2011

Softlink так выложите решение сюда, может кому нибудь ваше решение станет полезным

так оно не мое

И оно же большое))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<title>Menu</title>

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

body{
color:#fff;
}

#nav {padding:0; margin:0; list-style:none; height:38px; background:#333; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; background:#333;}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background:#333;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background:#333;}

#nav li:hover a.top_link, 
#nav li.iehover a.top_link {color:#fff; background:#333; }
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {background:#333; }
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {background:#333; }


#nav li:hover {position:relative; z-index:200; }

#nav li:hover ul.sub
{left:1px; top:38px; background:#333; padding:0px; border:1px solid #ccc; white-space:nowrap; width:90px; height:auto; z-index:300; }
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal; }
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#fff; text-decoration:none;border:1px solid #ccc; }
#nav li ul.sub li a.fly
{background:#333 url(files/arrow_over.gif) 80px 6px no-repeat; color:fff; }
#nav li:hover ul.sub li a:hover
{background:#333; color:#fff; border-color:#ccc; }
#nav li:hover ul.sub li a.fly:hover
{background:#333 url(files/arrow_over.gif) 80px 6px no-repeat; color:#fff; }


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-1px; background: #333; padding:0; border:1px solid #5c731e; color:#fff; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#333 url(files/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#ccc;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#333 url(files/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#ccc;} 


</style>


<body>
<ul id="nav">
	<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
		<ul class="sub">
			<li><a href="#nogo3" class="fly">Cameras</a>
					<ul>
						<li><a href="#nogo4">Nikon</a></li>
						<li><a href="#nogo5">Minolta</a></li>
						<li><a href="#nogo6">Pentax</a></li>
					</ul>
			</li>
			<li class="mid"><a href="#nogo7" class="fly">Lenses</a>
					<ul>
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo10">Telephoto</a></li>
						<li><a href="#nogo11" class="fly">Zoom</a>
							<ul>
								<li><a href="#nogo12">35mm to 125mm</a></li>
								<li><a href="#nogo13">50mm to 250mm</a></li>
								<li><a href="#nogo14">125mm to 500mm</a></li>
							</ul>
						</li>
						<li><a href="#nogo15">Mirror</a></li>
						<li><a href="#nogo16" class="fly">Non standard</a>
							<ul>
								<li><a href="#nogo17">Bayonet mount</a></li>
								<li><a href="#nogo18">Screw mount</a></li>
							</ul>
						</li>
					</ul>
			</li>
			<li><a href="#nogo19">Flash Guns</a></li>
			<li><a href="#nogo20">Tripods</a></li>
			<li><a href="#nogo21">Filters</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
		<ul class="sub">
			<li><a href="#nogo23">Printing</a></li>
			<li><a href="#nogo24">Photo Framing</a></li>
			<li><a href="#nogo25">Retouching</a></li>
			<li><a href="#nogo26">Archiving</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
		<ul class="sub">
			<li><a href="#nogo28">Support</a></li>
			<li><a href="#nogo29" class="fly">Sales</a>
				<ul>
					<li><a href="#nogo30">USA</a></li>
					<li><a href="#nogo31">Canadian</a></li>
					<li><a href="#nogo32">South American</a></li>
					<li><a href="#nogo33" class="fly">European</a>
						<ul>
							<li><a href="#nogo34" class="fly">British</a>
								<ul>
									<li><a href="#nogo35">London</a></li>
									<li><a href="#nogo36">Liverpool</a></li>
									<li><a href="#nogo37">Glasgow</a></li>
									<li><a href="#nogo38" class="fly">Bristol</a>
										<ul>
											<li><a href="#nogo39">Redland</a></li>
											<li><a href="#nogo40">Hanham</a></li>
											<li><a href="#nogo41">Eastville</a></li>
										</ul>
									</li>
									<li><a href="#nogo42">Cardiff</a></li>
									<li><a href="#nogo43">Belfast</a></li>
								</ul>
							</li>
							<li><a href="#nogo44">French</a></li>
							<li><a href="#nogo45">German</a></li>
							<li><a href="#nogo46">Spanish</a></li>
						</ul>
					</li>
					<li><a href="#nogo47">Australian</a></li>
					<li><a href="#nogo48">Asian</a></li>
				</ul>
			</li>
			<li><a href="#nogo49">Buying</a></li>
			<li><a href="#nogo50">Photographers</a></li>
			<li><a href="#nogo51">Stockist</a></li>
			<li><a href="#nogo52">General</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
		<ul class="sub">
			<li><a href="#nogo54">Online</a></li>
			<li><a href="#nogo55">Catalogue</a></li>
			<li><a href="#nogo56">Mail Order</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
</body>
</html>

slava03 · May 14, 2011

А вы учитесь искать и разбираться в найденном. Это не уникальное меню и таких уже много сделано. Берите любое и настройте для себя.

Что тут скажешь... Логично!

Sign In

Всплывающее меню

Question

Link to comment

Share on other sites

17 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

Join the conversation

Обсуждения

Important Information