Jemand.ru » Меню http://jemand.ru Веб строительство начинающим. Sat, 31 Dec 2011 16:49:09 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Мега меню на CSS + jQuery http://jemand.ru/mega-menyu-na-css-jquery/ http://jemand.ru/mega-menyu-na-css-jquery/#comments Wed, 26 Oct 2011 15:17:05 +0000 Jemand http://jemand.ru/?p=1009 1. CSS

ul.ldd_menu {
	margin: 0px;
	padding: 0;
	display: block;
	height: 50px;
	background-color: #0051A1;
	list-style: none;
	font-family: "Trebuchet MS", sans-serif;
	border-top: 1px solid #3474C6;
	border-bottom: 1px solid #3474C6;
	border-left: 10px solid #0051A1;
	-moz-box-shadow: 0px 3px 4px #007BC2;
	-webkit-box-shadow: 0px 3px 4px #007BC2;
	-box-shadow: 0px 3px 4px #007BC2;
	}
ul.ldd_menu a {
	text-decoration: none;
	}
ul.ldd_menu > li {
	float:left;
	position:relative;
	}
ul.ldd_menu > li > span {
	float: left;
	color: #fff;
	background-color: #0051A1;
	height: 50px;
	line-height: 50px;
	cursor: default;
	padding: 0px 20px;
	text-shadow: 0px 0px 1px #fff;
	border-right: 1px solid #3474C6;
	border-left: 1px solid #0049A1;
	}
ul.ldd_menu .ldd_submenu {
	position: absolute;
	top: 50px;
	width: 480px;
	display: none;
	opacity: 0.9;
	left: 0px;
	font-size: 10px;
	background: #0051A1;
	border-top: 1px solid #3474C6;
	-moz-box-shadow: 0px 3px 4px #0051A1 inset;
	-webkit-box-shadow: 0px 3px 4px #0051A1 inset;
	-box-shadow: 0px 3px 4px #0051A1 inset;
	}
a.ldd_subfoot{
	background-color: #f0f0f0;
	color: #444;
	display: block;
	clear: both;
	padding: 15px 20px;
	text-transform: uppercase;
	font-family: Arial, serif;
	font-size: 12px;
	text-shadow: 0px 0px 1px #fff;
	-moz-box-shadow: 0px 0px 2px #777 inset;
	-webkit-box-shadow: 0px 0px 2px #777 inset;
	-box-shadow: 0px 0px 2px #777 inset;
	}
ul.ldd_menu ul {
	list-style: none;
	float: left;
	border-left: 1px solid #2A6DC3;
	margin: 20px 0px 10px 30px;
	padding: 10px;
	}
li.ldd_heading {
	font-family: Georgia, serif;
	font-size: 13px;
	font-style: italic;
	color: #69C3FF;
	text-shadow: 0px 0px 1px #B03E23;
	padding: 0px 0px 10px 0px;
	}
ul.ldd_menu ul li a {
	font-family: Arial, serif;
	font-size: 10px;
	line-height: 20px;
	color: #fff;
	padding: 1px 3px;
	}
ul.ldd_menu ul li a:hover {
	-moz-box-shadow: 0px 0px 2px #2A6DC3;
	-webkit-box-shadow: 0px 0px 2px #2A6DC3;
	box-shadow: 0px 0px 2px #2A6DC3;
	background: #007BC2;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	$(function() {
		var $menu = $('#ldd_menu');
		$menu.children('li').each(function(){
			var $this = $(this);
			var $span = $this.children('span');
			$span.data('width',$span.width());
			$this.bind('mouseenter',function(){
				$menu.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':'440px'},300,function(){
					$this.find('.ldd_submenu').slideDown(300);
				});
			}).bind('mouseleave',function(){
				$this.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':$span.data('width')+'px'},300);
			});
		});
	});
</script>

4. HTML

<ul id="ldd_menu" class="ldd_menu">
	<li>
		<span>Меню №1</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<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>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<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>
				<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<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>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
	<li>
		<span>Меню №2</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<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>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<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>
			<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<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>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
	<li>
		<span>Меню №3</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<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>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<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>
			<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<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>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
</ul>
]]> http://jemand.ru/mega-menyu-na-css-jquery/feed/ 14 Меню со всплывающими подсказками на jQuery http://jemand.ru/menyu-so-vsplyvayushhimi-podskazkami-na-jquery/ http://jemand.ru/menyu-so-vsplyvayushhimi-podskazkami-na-jquery/#comments Mon, 10 Oct 2011 15:30:48 +0000 Jemand http://jemand.ru/?p=952 1. CSS

.menu {
	margin: 100px 0 0;
	padding: 0;
	list-style: none;
	}
.menu li {
	padding: 0;
	margin: 0 2px;
	float: left;
	position: relative;
	text-align: center;
}
.menu a {
	padding: 14px 10px;
	display: block;
	color: #000000;
	width: 144px;
	text-decoration: none;
	font-size: 12px;
	font-family: Tahoma;
	text-transform: uppercase;
	background: url(button.gif) no-repeat center;
	}
.menu li em {
	font-weight: normal;
	background: url(hover.png) no-repeat;
	width: 180px;
	height: 45px;
	position: absolute;
	top: -85px;
	left: -15px;
	text-align: center;
	padding: 20px 12px 10px;
	font-style: normal;
	display: none;
	}

2. Подключение jQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

3. JavaScript

<script type="text/javascript">
	$(document).ready(function(){
		$(".menu a").append("<em></em>");
		$(".menu a").hover(function() {
			$(this).find("em").stop(true, true).animate({opacity: "show", top: "-75"}, "slow");
			var hoverText = $(this).attr("title");
			$(this).find("em").text(hoverText);
		}, function() {
			$(this).find("em").stop(true, true).animate({opacity: "hide", top: "-85"}, "fast");
		});
	});
</script>

4. HTML

<ul class="menu">
	<li>
		<a href="http://jemand.ru" title="На главную страницу">Главная</a>
	</li>
	<li>
		<a href="http://jemand.ru/menyu-so-vsplyvayushhimi-podskazkami-na-jquery/#commentarea" title="Оставить комментарий">Комментаторская</a>
	</li>
	<li>
		<a href="http://vkontakte.ru/jemand_web/" title="Наша группа ВКонтакте">ВКонтакте</a>
	</li>
</ul>

5. Изображения
КнопкаВсплывающий фон

]]> http://jemand.ru/menyu-so-vsplyvayushhimi-podskazkami-na-jquery/feed/ 0 Вертикальное выпадающее меню CSS+JS OnClick http://jemand.ru/vertikalnoe-vypadayushhee-menyu-cssjs-onclick/ http://jemand.ru/vertikalnoe-vypadayushhee-menyu-cssjs-onclick/#comments Fri, 04 Feb 2011 13:20:19 +0000 Jemand http://jemand.ru/?p=183 В данном вертикальном меню, подменю открывается не при наведении курсора на главный пункт меню, как в предыдущем примере, а при клике на него.
1. CSS

#menu_body li ul {
	display: none;
	}
#menu_body li:hover ul, #menu_body li.over ul {
	display: block;
	}
 #menu_body {
    background:#171717;
    width: 200px;
    }
#menu_body a {
	display: block;
	width: 185px;
	height: 24px;
	padding-left: 15px;
	} 

#menu_body ul li {
    list-style-type: none;
    border-bottom: 1px solid #fff;
    margin-left: -40px;
    padding-left: 0px;
    } 

#menu_body ul li a {
    color: #fff;
    text-decoration: none;
	font-size: 115%;
	font-family: Georgia;
    } 

#menu_body ul li a:hover {
    color: #fff;
    text-decoration: none;
	background:#424242;
    } 

#menu_body ul li ul li {
    border: 0;
    list-style-type: none;
    color: #fff;
    list-style-position: inside;
	background:#7F7F7F;
    } 

#menu_body ul li ul{
    border-top: 1px solid #fff;
    margin-left: -10px;
    padding-left: 50px;
    }

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

<script type="text/javascript">
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
startList = function allclose() {
	for (i=0; i < id_menu.length; i++){
		document.getElementById(id_menu[i]).style.display = "none";
	}
}
function openMenu(id){
	for (i=0; i < id_menu.length; i++){
		if (id != id_menu[i]){
			document.getElementById(id_menu[i]).style.display = "none";
		}
	}
	if (document.getElementById(id).style.display == "block"){
		document.getElementById(id).style.display = "none";
	}else{
		document.getElementById(id).style.display = "block";
	}
}
window.onload=startList;
</script>

2.1. Разбор JavaScript

var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');

В данной строке нужно указать столько sub_menu сколько у Вас будет раскрывающихся групп меню. Т.е. если у Вас девять пунктов меню, указываем все девять: 

'sub_menu_1','sub_menu_2','sub_menu_3','sub_menu_4','sub_menu_5','sub_menu_6','sub_menu_7','sub_menu_8','sub_menu_9'

3. HTML

<div id="menu_body">
	<ul>
		<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">Пункт №1</a>
			<ul id="sub_menu_1">
				<li><a href="#">Подпункт №1</a></li>
			</ul>
		</li>
		<li><a href="#" onclick="openMenu('sub_menu_2');return(false)">Пункт №2</a>
			<ul id="sub_menu_2">
				<li><a href="#">Подпункт №1</a></li>
				<li><a href="#">Подпункт №2</a></li>
			</ul>
		</li>
		<li><a href="#" onclick="openMenu('sub_menu_3');return(false)">Пункт №3</a>
			<ul id="sub_menu_3">
				<li><a href="#">Подпункт №1</a></li>
				<li><a href="#">Подпункт №2</a></li>
				<li><a href="#">Подпункт №3</a></li>
			</ul>
		</li>
	</ul>
</div>

Internet Explorer 6 не совсем корректно отображает данное меню, но это всего лишь проблема стилей, которые мне просто лень подгонять под IE6.

Демо

]]> http://jemand.ru/vertikalnoe-vypadayushhee-menyu-cssjs-onclick/feed/ 81 Вертикальное выпадающее меню CSS+JS MouseOver http://jemand.ru/vertikalnoe-vypadayushhee-menyu-cssjs-mouseover/ http://jemand.ru/vertikalnoe-vypadayushhee-menyu-cssjs-mouseover/#comments Thu, 03 Feb 2011 22:38:53 +0000 Jemand http://jemand.ru/?p=184 В данном выпадающем вертикальном меню, подменю открываются при наведении мыши на основной пункт меню. Есть такое же меню, но у него подпункты открываются при клике по основному пункту меню.
1. CSS

 #menu_body li ul {
	display: none;
	}
#menu_body li:hover ul, #menu_body li.over ul {
	display: block;
	}
 #menu_body {
    background:#171717;
    width: 200px;
    }
#menu_body a {
	display: block;
	width: 185px;
	height: 24px;
	padding-left: 15px;
	} 

#menu_body ul li {
    list-style-type: none;
    border-bottom: 1px solid #fff;
    margin-left: -40px;
    padding-left: 0px;
    } 

#menu_body ul li a {
    color: #fff;
    text-decoration: none;
	font-size: 115%;
	font-family: Georgia;
    } 

#menu_body ul li a:hover {
    color: #fff;
    text-decoration: none;
	background:#424242;
    } 

#menu_body ul li ul li {
    border: 0;
    list-style-type: none;
    color: #fff;
    list-style-position: inside;
	background:#7F7F7F;
    } 

#menu_body ul li ul{
    border-top: 1px solid #fff;
    margin-left: -10px;
    padding-left: 50px;
    }

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

<script>
 startList = function() {
     if (document.all&&document.getElementById) {
         navRoot = document.getElementById("ul1");
         for (i=0; i<navRoot.childNodes.length; i++) {
              node = navRoot.childNodes[i];
              if (node.nodeName=="LI") {
                  node.onmouseover=function() {
                      this.className+=" over";
                  }
               node.onmouseout=function() {
               this.className=this.className.replace(" over","");
                  }
              }
         }
     }
}
window.onload=startList;
</script>

3. HTML

<div id="menu_body">
   <ul id="ul1">
          <li><a href="#">Пункт №1</a>
                <ul>
                    <li><a href="#">Подпункт №1</a></li>
                </ul>
         </li>
         <li><a href="#">Пункт №2</a>
                <ul>
                    <li><a href="#">Подпункт №1</a></li>
                    <li><a href="#">Подпункт №2</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>
</div>

Internet Explorer 6 не совсем корректно отображает данное меню, но это всего лишь проблема стилей, которые мне просто лень подгонять под IE6.

Демо

]]> http://jemand.ru/vertikalnoe-vypadayushhee-menyu-cssjs-mouseover/feed/ 2 Горизонтальное выпадающее меню на CSS http://jemand.ru/gorizontalnoe-vypadayushhee-menyu-na-css/ http://jemand.ru/gorizontalnoe-vypadayushhee-menyu-na-css/#comments Tue, 01 Feb 2011 11:28:02 +0000 Jemand http://jemand.ru/?p=105 Представляю Вашему вниманию простейшее меню на 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>
Готово!
Демо

]]> http://jemand.ru/gorizontalnoe-vypadayushhee-menyu-na-css/feed/ 27