CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 254   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

37

Горизонтальное выпадающее меню на CSS

Jemand 130084 , , ,
CSS

Представляю Вашему вниманию простейшее меню на CSS без использования JavaScript (не считая костыля для IE6).
Конструкция меню предельна проста, поэтому перейдём сразу к коду.
1. CSS


#menu {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-family: Georgia;
	}
#menu li {
	list-style: none;
	float: left;
	height: 33px;
	padding: 0;
	margin: 0;
	width: 150px;
	text-align: center;
	background: #171717;
	position: relative;
	padding-top: 12px;
	}
#menu li ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 150px;
	display: none;
	position: absolute;
	left: 0;
	top: 45px;
	}
#menu li ul li {
	float: none;
	height: 33px;
	margin: 0;
	width: 150px;
	text-align: center;
	background: #7F7F7F;
	}
#menu li a {
	display: block;
	width: 150px;
	height: 33px;
	color: #fff;
	text-decoration: none;
	}
#menu li:hover ul, #menu li.jshover ul {
	display: block;
	}
#menu li:hover, #menu li.jshover {
	background: #424242;
	}

2. HTML


<ul id="menu">
	<li><a href="#">Пункт №1</a></li>
	<li>
		<a href="#">Пункт №2</a>
		<ul>
			<li><a href="#">Подпункт №1</a></li>
			<li><a href="#">Подпункт №2</a></li>
			<li><a href="#">Подпункт №3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Пункт №3</a>
		<ul>
			<li><a href="#">Подпункт №1</a></li>
			<li><a href="#">Подпункт №2</a></li>
			<li><a href="#">Подпункт №3</a></li>
			<li><a href="#">Подпункт №4</a></li>
			<li><a href="#">Подпункт №5</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Пункт №4</a>
		<ul>
			<li><a href="#">Подпункт №1</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Пункт №5</a>
		<ul>
			<li><a href="#">Подпункт №1</a></li>
			<li><a href="#">Подпункт №2</a></li>
			<li><a href="#">Подпункт №3</a></li>
			<li><a href="#">Подпункт №4</a></li>
			<li><a href="#">Подпункт №5</a></li>
		</ul>
	</li>
</ul>

3. Тот самый костыль для Internet Explorer 6

<script>
	jsHover = function() {
	var hEls = document.getElementById("menu").getElementsByTagName("li");
	for (var i=0, len=hEls.length; i<len; i++) {
	hEls[i].onmouseover=function() { this.className+=" jshover"; }
	hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
	}
	}
	if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>

Данный код вставляем перед закрывающим тегом </head>
Готово!
Демо

Рекламная пауза

» 37 комментариев

  1. как убрать эти жирные точки, стоящие в менюшке

  2. аа понятно list-style: none поставлен не в том месте. Во всяком случае у меня работает так:

    
    #menu {
    	padding: 0;
    	margin: 0;
    	font-size: 100%;
    	font-family: Georgia;
    	}
    #menu li {
    #menu {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	font-size: 100%;
    	font-family: Georgia;
    	}
    #menu li {
    	float: left;
    	height: 33px;
    	padding: 0;
    	margin: 0;
    	width: 150px;
    	text-align: center;
    	background: #171717;
    	position: relative;
    	padding-top: 12px;
    	}
    	float: left;
    	height: 33px;
    	padding: 0;
    	margin: 0;
    	width: 150px;
    	text-align: center;
    	background: #171717;
    	position: relative;
    	padding-top: 12px;
    	}
  3. Подскажите, а что надо добавить в CSS если уровней вложения в меню больше чем один?

    Уже целый час сижу, никак не получается…

    • На скорую руку накидал, дальше сами развивайте
      CSS

      #menu{
      	list-style:none;
      	padding:0;
      	margin:0;
      	font-size: 100%;
      	font-family: Georgia;
      }
      #menu li{
      	float:left;
      	height:33px;
      	padding:0;
      	margin:0;
      	width:150px;
      	text-align:center;
      	background:#171717;
      	position:relative;
      	padding-top: 12px;
      }
      #menu li li{
      	background:#7F7F7F;
      }
      #menu li ul{
      	list-style:none;
      	padding:0;
      	margin:0;
      	width:150px;
      	display:none;
      	position:absolute;
      	background:#7F7F7F;
      	left:0;
      	top:45px;
      }
      #menu li ul li ul li{
      	list-style:none;
      	width:150px;
      	display:none;
      	position:absolute;
      	left:150px;
      	top:-45px;
      	background:#7F7F7F;
      }
      #menu li a{
      	display:block;
      	width:150px;
      	height:33px;
      	color: #fff;
      	text-decoration: none;
      }
      #menu li:hover ul, #menu li.jshover ul{
      	display:block;
      }
      #menu li:hover ul li:hover ul li, #menu li.jshover ul{
      	display:block;
      }
      #menu li:hover, #menu li.jshover{
      	background:#424242;
      }
      

      HTML

      <ul id="menu">
      	<li><a href="#">Пункт №1</a></li>
      	<li>
      		<a href="#">Пункт №2</a>
      		<ul>
      			<li><a href="#">Подпункт №1</a></li>
      			<li><a href="#">Подпункт №2</a></li>
      			<li>
      				<a href="#">Подпункт №3</a>
      				<ul>
      					<li><a href="#">Подподпункт №1</a></li>
      				</ul>
      			</li>
      		</ul>
      	</li>
      		<li>
      		<a href="#">Пункт №3</a>
      		<ul>
      			<li><a href="#">Подпункт №1</a></li>
      			<li><a href="#">Подпункт №2</a></li>
      			<li>
      				<a href="#">Подпункт №3</a>
      				<ul>
      					<li><a href="#">Подподпункт №1</a></li>
      				</ul>
      			</li>
      			<li><a href="#">Подпункт №4</a></li>
      			<li><a href="#">Подпункт №5</a></li>
      		</ul>
      	</li>
      	<li>
      		<a href="#">Пункт №4</a>
      		<ul>
      			<li><a href="#">Подпункт №1</a></li>
      		</ul>
      	</li>
      	<li>
      		<a href="#">Пункт №5</a>
      		<ul>
      			<li><a href="#">Подпункт №1</a></li>
      			<li><a href="#">Подпункт №2</a></li>
      			<li><a href="#">Подпункт №3</a></li>
      			<li><a href="#">Подпункт №4</a></li>
      			<li><a href="#">Подпункт №5</a></li>
      		</ul>
      	</li>
      </ul>
      
  4. Добрый день!
    Подскажите, возможно ли выполнить это меню таким образом, чтобы при перемещении курсора мышки с активного выпадающего меню его исчезновение происходило с некоторой задержкой. Но при этом задержки не будет при наведении курсора мышки на другой раздел меню.
    Пример см. сайт bp.com горизонтальное меню.

  5. Jemand, будьте добры, можно в отдельном примере или подробнее здесь?

  6. Вау, спасибо огромное! Долго искала выпадающее меню, это самое лучшее из того, что я находила!!!

  7. Подскажите пожалуйста как изменить ширину каждого меню(каждой кнопки) отдельно?

  8. Поогите нужна помощь. Скачал меню (с другого сайта) меню на английском. меняю все на русский но ничего не видно текст изчез. что делать??

  9. Добрый день! Подскажите пожалуйста, при попытке привести “Подподменю 1,2,3″ к виду “Подменю 1,2,3″, отображается только “Подподменю 3″.
    Что делать?

  10. Ой, а как код вставить правильно? =)

  11. CSS

    
    #menu{
    	list-style:none;
    	padding:0;
    	margin:0;
    	font-size: 100%;
    	font-family: Georgia;
    	}
    #menu li{
    	float:left;
    	height:22px;
    	padding:0;
    	width:150px;
    	text-align:center;
    	background:#663300;
    	position:relative;
    	padding-top: 2px;
    }
    #menu li li{
    	background:#7F7F7F;
    }
    #menu li ul{
    	text-align:left;
    	list-style:none;
    	padding:0;
    	margin:0;
    	width:150px;
    	display:none;
    	position:absolute;
    	background:#484848;
    	left:0;
    	top:24px;
    }
    #menu li ul li ul li {
    	text-align:center;
    	list-style:none;
    	float:none;
    	width:150px;
    	display:none;
    	position:absolute;
    	left:150px;
    	top:-24px;
    	background:#7F7F7F;
    	margin:0;
    }
    #menu li a{
    	display:block;
    	width:150px;
    	height:33px;
    	color: #fff;
    	text-decoration: none;
    }
    #menu li:hover ul, #menu li.jshover ul{
    	display:block;
    }
    #menu li:hover ul li:hover ul li, #menu li.jshover ul{
    	display:block;
    }
    #menu li:hover, #menu li.jshover{
    	background:#484848;
    }
    

    HTML

    
    <ul id="menu">
    	<li><a href="#">Пункт №1</a></li>
    	<li>
    		<a href="#">Пункт №2</a>
    		<ul>
    			<li><a href="#">Подпункт №1</a></li>
    			<li><a href="#">Подпункт №2</a></li>
    			<li>
    				<a href="#">Подпункт №3</a>
    				<ul>
    					<li><a href="#">Подподпункт №1</a></li>
    					<li><a href="#">Подподпункт №2</a></li>
    					<li><a href="#">Подподпункт №3</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul>
    
    • На скорую руку как-то так:
      CSS

      #menu{
      	list-style:none;
      	padding:0;
      	margin:0;
      	font-size: 100%;
      	font-family: Georgia;
      	}
      #menu li{
      	float:left;
      	height:22px;
      	padding:0;
      	width:150px;
      	text-align:center;
      	background:#663300;
      	position:relative;
      	padding-top: 2px;
      }
      #menu li li{
      	background:#7F7F7F;
      }
      #menu li ul{
      	text-align:left;
      	list-style:none;
      	padding:0;
      	margin:0;
      	width:150px;
      	display:none;
      	position:absolute;
      	background:#484848;
      	left:0;
      	top:24px;
      }
      #menu li ul li ul li {
      	text-align:center;
      	list-style:none;
      	float:none;
      	width:150px;
      	display:none;
      	left:150px;
      	top:-24px;
      	background:#7F7F7F;
      	margin:0;
      }
      #menu li a{
      	display:block;
      	width:150px;
      	height:33px;
      	color: #fff;
      	text-decoration: none;
      }
      #menu li:hover ul, #menu ul{
      	display:block;
      	height: 0;
      	background: #f00;
      }
      
      #menu li:hover ul li:hover ul li, #menu  ul{
      	display:block;
      }
      #menu li:hover, #menu {
      	background:#484848;
      }
      

      HTML

      <ul id="menu">
      	<li><a href="#">Пункт №1</a></li>
      	<li>
      		<a href="#">Пункт №2</a>
      		<ul>
      			<li><a href="#">Подпункт №1</a></li>
      			<li>
      				<a href="#">Подпункт №2</a>
      				<ul>
      					<li><a href="#">Подподпункт №1</a></li>
      					<li><a href="#">Подподпункт №2</a></li>
      					<li><a href="#">Подподпункт №3</a></li>
      				</ul>
      			</li>
      			<li>
      				<a href="#">Подпункт №3</a>
      				<ul>
      					<li><a href="#">Подподпункт №1</a></li>
      					<li><a href="#">Подподпункт №2</a></li>
      					<li><a href="#">Подподпункт №3</a></li>
      				</ul>
      			</li>
      		</ul>
      	</li>
      </ul>
      
  12. Не подскажите почему не работает выпадающее меню ни с одного сайта??? я уже несколько дней бьюсь и ни чего не получается!!! можете написать по пунктам че надо делать???1

  13. Здравствуйте.как мне выровнить меню по центру ,что оно зафиксировалось _zsuk.ru

  14. как края меню закруглить??скажите

  15. Хотела сделать красивые кнопки в меню, но ни один браузер их не отображает.
    Вот код

    
    .preload1 {background:url(./Images/three_1.gif);}
    .preload2 {background:url(./Images/three_1a.gif);}
    
    #nav {padding:0; margin:0; list-style:none; height:35px; background:#000 url(./Images/three_0a.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
    #nav li.top {display:block; float:left; height:35px;}
    #nav li a.top_link {display:block; float:left; height:35px; line-height:35px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 20px; cursor:pointer;background:url(/Images/three_0.gif);}
    #nav li a.top_link span {float:left; display:block; padding:0 40px 0 20px; height:35px; background:url(/Images/three_0.gif) right top no-repeat;}
    #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background:url(/Images/three_0a.gif) no-repeat right top;}
    
    #nav li:hover a.top_link {color:#fff; background:url(/Images/three_1.gif) no-repeat;}
    #nav li:hover a.top_link span {background:url(/Images/three_1.gif) no-repeat right top;}
    #nav li:hover a.top_link span.down {background:url(/Images/three_1a.gif) no-repeat right top;}
    

    не подскажите, что делать?

  16. Здравствуйте! Использую данное меню в качестве выпадающего списка. И у меня на странице получается их несколько, в разных ячейках таблицы. Я столкнулся с проблемой что в ie6, 7, 8 beta. Раскрывается только одно меню, а остальные нет.

  17. добрый тоесть чтобы мне сделать это на сайте который написан в блакноте HTML только надо просто вставить то что у вас в разделе HTML
    если нет то куда вставлять CSS данные


Оставить комментарий