Jump to content
  • 0

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


RIVA
 Share

Question

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

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

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

<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>

Link to comment
Share on other sites

  • 0

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

О том, какой код нужно написать для 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 ? указание доктайпа.

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

Link to comment
Share on other sites

  • 0

Когда-то я писал похожий пример. Вот, посмотрите: 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>

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy