Как сделать навигационное меню?

RIVA · November 27, 2007

Необходимо что бы справа на страничке всегда было навигационное меню. Т.е. чтобы при прокрутке страницы оно не выходило за переделы экрана. Знаю про фреймы, но мне интересно есть ли другой способ? Например видел сайты где меню двигается за экраном при прокрутке страницы. Как это можно сделать? Как "обычно делают"?

Dimitry Wolotko · November 27, 2007

В лягушатник.

По теме: - стиль - position - http://htmlbook.ru/css/position.html

Роман · November 27, 2007

Может быть это имелось ввиду?

<html>
<head>
<script language="JavaScript">
function floatMenu() {
// Указывает, где находится меню по вертикали
// Возможные варианты - top и bottom
 verticalPos = "top"; // Меню находится вверху

// Указывает, где находится меню по горизонтали
// Возможные варианты - left и right
 horizontalPos = "right"; // Меню располагается справа
 startX = 10;	// Начальная координата по горизонтали
 startY = 50; // Начальная координата по вертикали

 function coordMenu(id) {
// Обращаемся к нашему меню по его id через getElementById
 el = document.getElementById(id);

// Получаем координаты меню
 el.currentPosition = function(x, y) { 
 if (horizontalPos == "left") this.style.left = x;
 else this.style.right = x;
 this.style.top = y;
 }

// Положение по горизонтали остается неизменным 
 el.x = startX;

// Если меню расположено вверху окна, то вертикальная 
// текущая координата не меняется
 if (verticalPos == "top") el.y = startY;

// Если меню расположено внизу окна, то из высоты окна вычитаем
// исходную вертикальную координату меню
 else el.y = document.body.clientHeight - startY;
 return el;
 }
 slideMenu = function()	{
// Число 20 в знаменателе определяет плавность хода,
// чем оно больше, тем медленнее движется меню
 if (verticalPos == "top")
 obj.y += (document.body.scrollTop + startY - obj.y)/20;
 else 
 obj.y += (document.body.clientHeight + document.body.scrollTop - startY - obj.y)/20;

// Сохраняем текущие координаты меню
 obj.currentPosition(obj.x, obj.y);

// Вызываем функцию slideMenu каждые 10 миллисекунд
 setTimeout("slideMenu()", 10);
 }
 obj = coordMenu("menu");
 slideMenu();
}
</script>
<style type="text/css">
 #menu {
 width: 150px; 			/* Ширина меню */
 border: 1px solid navy;		/* Рамка вокруг меню */
 background: #ffffee;			/* Цвет фона */
 position: absolute			/* Абсолютное позиционирование */
}
 .title {
 background: navy; 			/* Цвет фона под надписью */
 color: white;				/* Цвет заголовка */
 font-family: Arial, sans-serif; 	/* Рубленый шрифт */
 font-weight: bold;			/* Жирное начертание */
 font-size: 80%			/* Размер текста заголовка */
}
 .content A { 
 border-bottom: 1px solid silver;	/* Линии между ссылками */
 padding-bottom: 4px;			/* Расстояние от ссылки до линии под ней */
 display: block			/* Ссылка на всю ширину меню */
}
 .title, .content { 
 padding: 4px 				/* Поля вокруг ссылок и заголовка */
}
</style>
</head>
<body onLoad="floatMenu()">
 <div id=menu>
 <div class=title>Навигация по сайту</div>
 <div class=content>
 <a href=link1.html>Домой</a>
 <a href=link2.html>Статьи</a>
 <a href=link3.html>Форум</a>
 <a href=link4.html>Помощь</a>
 </div>
 </div>
<!-- Таблица для создания вертикальной полосы прокрутки -->
 <table height=1000>
 <tr><td> </td></tr>
 </table>
</body>
</html>

RIVA · November 27, 2007

Спасибо - почитал, я так понял мне нужно position: fixed, но IE его поддерживает начиная только с версии 7 ((

Еще варианты есть? (желательно чтобы работали и в 5-м и в 6-м IE)

maddogrts · November 27, 2007

Специально для тебя:

О том, какой код нужно написать для MSIE в стилях страницы, чтобы сделать блок с фиксированной позицией, давно известно. Технологи студии пользуются разными способами решения этой задачи ? каждый своим любимым.
Простая идея
Общая идея неизменна: нужно записать в CSS выражение, которое браузер станет вычислять при любом изменении размеров или положения страницы:
top: expression(document.body.scrollTop + "px");
Но такой простейший вариант не работает, из-за чего и появились три разных способа обойти это:
1. с функцией eval():
top: expression(
	eval(document.body.scrollTop) + "px"
);
2. с массивом:
top: expression(
	document.getElementsByTagName("body")[0].scrollTop + "px"
);
3. с функцией parseInt():
top: expression(
	parseInt(document.body.scrollTop, 10) + "px"
);
Этот блок остается на месте при вертикальной прокрутке и
дрожит
не дрожит
в MSIE.
Важный довесок
Эмуляция свойства position: fixed удалась, но удовлетворения от этого еще нет, потому что ?фиксированный? блок дергается при вертикальной прокрутке.
Решение, придуманное Ромой Воронежским и Юрой Васильчиковым, непостижимо и просто ? чтобы избавиться от дрожаний, нужно зафиксировать фон страницы:
body
{
	background: url('/n.gif') no-repeat;
	background-attachment: fixed;
}
Файл n.gif ? однопиксельная прозрачная картинка (ее, кстати, даже не обязательно держать на сервере).
Показанный прием одинаково хорошо работает в браузерах MSIE уже начиная с пятой версии.
Примечание. Нужно лишь помнить, что для MSIE 7 есть более простое решение для правильной работы свойства fixed ? указание доктайпа.

Автор Андрей Шитов

maddogrts · November 27, 2007

С лягушятником явно загнули , тема серьезная

Dimitry Wolotko · November 27, 2007

100 обсуждали. Потому и в лягушатник =)

Но будет что - то интересное - запросто перенесу - не вопрос.

maddogrts · November 27, 2007

#header
 {
 width: 100%;
 padding: 0.5em 0;
 background-color: ButtonFace; 
 color: ButtonText;
 position: fixed;
 top: 0;
 left: 0;
 //position: absolute;
 top: expression(
 document.getElementsByTagName( 'body' )[0].scrollTop + "px"
 );
 }

вот так вот выглядит )

maddogrts · November 27, 2007

К сожалению у меня не работает )))) не могу опнять почему

maddogrts · November 27, 2007

Из за доктайпа не работает (, щас подумаем

yopopt · November 27, 2007

Когда-то я писал похожий пример. Вот, посмотрите: http://vsevsegdaok.net/test/primer.html

Код примера:

<!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=windows-1251" />
<title>Меню над текстом.</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
p {
	font-size: 300%;
}
#head {
	background-color: #000;
	color: #fff;
	height: 90px;
	width: 100%;
	margin-bottom: 50px;
}
#pngmenu {
	height: 50px;
	width: 100%;
	position: absolute;
	top: 90px;
}
#fixpngmenu {
	height: 50px;
	width: 100%;
	position: fixed;
	top: 0;
}
#gradient {
	background: url("gradient.png") repeat-x;
	height: 50px;
	width: 100%;
}
#menu {
	background-color: #eff;
	height: 20px;
	text-align: center;
	border: 1px solid #000;
}
#menu li {
	display: inline;
}
#content {
}
</style>
<!--[if lte IE 6]>
	<style>
	body {
		background: url(about:blank) 0 0 fixed no-repeat;
	}
	#pngmenu {
		top: expression("90px");
	}
	#fixpngmenu {
		position: absolute;
		top: expression(parseInt(document.documentElement.scrollTop, 10) + "px");
	}
	#gradient {
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient.png", sizingMethod="scale");
		background: none;
	}
	</style>
<![endif]-->
</head>

<body> 

<div id="head">
	Это заголовок
</div>

<div id="pngmenu" class="fixed">
	<ul id="menu">  <!-- Это меню :) -->
		<li>Услуги и цены</li>
		<li>Новости</li>
		<li>Как нас найти</li>
		<li>Наши работы</li>
		<li>Написать нам</li>

	</ul>
	<div id="gradient"></div>
</div>

<div id="content">  <!-- Это контент -->
	<p>Lorem ipsum dolor sit amet consectetuer magna urna convallis Vivamus tincidunt. Congue a nibh nibh tempus Curabitur fermentum malesuada penatibus et vel. Volutpat adipiscing Nam Curabitur orci tincidunt nec tincidunt ut urna ac. Lorem vitae fringilla ut metus Morbi dignissim mauris a Sed eu. Sagittis tortor sapien sagittis quis ante leo libero volutpat ante a. Gravida velit tincidunt.</p>
</div>

<!-- Это скрипт :) -->
<script type="text/javascript"> 
<!--
var menu = document.getElementById("pngmenu");
window.onscroll = function() {
	if (document.documentElement.scrollTop >= 90) {
		menu.setAttribute("id","fixpngmenu");
	}
	else {
		menu.setAttribute("id","pngmenu");
	}
}
-->
</script>
<!-- Скрипт закончился -->

</body>
</html>

maddogrts · November 27, 2007

Здорого

RIVA · November 28, 2007

Роман, когда говорил про скользящие меняю имелл ввиду именно, это. Спасибо!

Однако в текущем дизайне лучше чтобы просто фиксед был.

maddogrts ага, спасибо, вроде работает))

RIVA · November 29, 2007

Не могу понять вот это

Файл n.gif ? однопиксельная прозрачная картинка (ее, кстати, даже не обязательно держать на сервере).

А где ее тогда можно держать?

maddogrts · November 29, 2007

RIVA

Имеет ввиду на другом сайте , например ))), типа ссылочка куда нибудь )),

http://grani-design.narod.ru/uploads/post-...-1185610134.jpg

Типа такого ).

Ну а лучше просто оставь на сервере )

rash · November 29, 2007

Не могу понять вот это
Файл n.gif ? однопиксельная прозрачная картинка (ее, кстати, даже не обязательно держать на сервере).
А где ее тогда можно держать?

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

maddogrts · November 29, 2007

ага я дурак (

Sign In

Как сделать навигационное меню?

Question

Link to comment

Share on other sites

16 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

Обсуждения

Important Information