Главная » Вебмастеру » Плавающее горизонтальное меню для сайта

Плавающее горизонтальное меню для сайта

2015-04-17 / Вр:21:24 / просмотров: 10327

Как сделать плавающее горизонтальное меню для сайта?

С помощью кода, который вы возьмете на моем блоге, вы сможете сделать плавающее меню. И не только меню, по желанию можно сделать плавающую шапку, боковую часть сайта и т.д. Как работает плавающее меню, можно посмотреть в демонстрации:

[посмотреть демонстрацию]

Понравилась демонстрация?
Пробуем такое же сделать самостоятельно.
Для этого возьмите стандартный HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Теперь подключите библиотеку jquery. Кстати, рекомендую почитать мою статью «Как подключить библиотеку jQuery в HTML» здесь.
Чтобы подключить библиотеку jquery, вставьте перед закрывающим тегом </head> вот такой код:

<script ENGINE="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js "></script>

Теперь после подключения библиотеки jquery, вставьте вот такой скрипт:

<script language="javascript">
$(document).ready(function(){
var headermenu = $(".float-menu");
var offset = headermenu.offset();
var left = offset.left;
var top = offset.top;
var width = $(".float-menu").width();
var height = $(".float-menu").height();

$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > top) {
$('#float').css({
width:width+'px',
height:height+'px'
});
$('.float-menu').css({
left:left+'px',
position:'fixed',
top:"0px",
width:width+"px"
});
} else {
$('#float').css({
width:'0px',
height:'0px'
});
$('.float-menu').css({
position:'static',
});
}
});
});
</script>

Это будет выглядеть вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Заголовок страницы</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js "></script>

<script language="javascript">
$(document).ready(function(){
var headermenu = $(".float-menu");
var offset = headermenu.offset();
var left = offset.left;
var top = offset.top;
var width = $(".float-menu").width();
var height = $(".float-menu").height();

$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > top) {
$('#float').css({
width:width+'px',
height:height+'px'
});
$('.float-menu').css({
left:left+'px',
position:'fixed',
top:"0px",
width:width+"px"
});
} else {
$('#float').css({
width:'0px',
height:'0px'
});
$('.float-menu').css({
position:'static',
});
}
});
});
</script>
</head>
<body>
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Теперь создайте меню с классом «header-menu»:

<div class="float-menu">
<a href='https://bloggood.ru/'>Главная</a><a href='https://bloggood.ru/avtor/'>Автор</a><a href='https://bloggood.ru/kontakty/'>Контакты</a>
</div>

И напоследок, в CSS создайте стиль для плавающего меню (если вы не знаете, как работать в CSS, рекомендую почитать тут):

.float-menu
{
margin:0px auto;
width:450px;
background:#000;

}
.float-menu a
{
color:#fff;
padding-left:10px;
}

Вот абсолютно готовый код к использованию:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Заголовок страницы</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js "></script>

<script language="javascript">
$(document).ready(function(){
var headermenu = $(".float-menu");
var offset = headermenu.offset();
var left = offset.left;
var top = offset.top;
var width = $(".float-menu").width();
var height = $(".float-menu").height();

$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > top) {
$('#float').css({
width:width+'px',
height:height+'px'
});
$('.float-menu').css({
left:left+'px',
position:'fixed',
top:"0px",
width:width+"px"
});
} else {
$('#float').css({
width:'0px',
height:'0px'
});
$('.float-menu').css({
position:'static',
});
}
});
});
</script>
<style type="text/css">
.float-menu
{
margin:0px auto;
width:450px;
background:#000;

}
.float-menu a
{
color:#fff;
padding-left:10px;
}
</style>
</head>
<body>
<div class="float-menu">
<a href='https://bloggood.ru/'>Главная</a><a href='https://bloggood.ru/avtor/'>Автор</a><a href=' https://bloggood.ru/kontakty/'>Контакты</a>
</div>
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Сохраняйте и смотрите.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222516
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187680
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186563

7 Ответов на комментарий - Плавающее горизонтальное меню для сайта

Тамара Полякова

18.04.2015 в 17:46

Привет Степан! Хорошая статья и многим она пригодится! Хотела бы с тобой пообщаться в контакте или по почте!
Людмила Лао

18.04.2015 в 21:43

Степан, расскажите, как можно сделать под вордпреской такую страницу, без классической шапки и панелей?
Степан => автор блога

20.04.2015 в 22:03

Здравствуйте, Тамара! Я ВКонтакте с 7:30 до 16:15.
Степан => автор блога

20.04.2015 в 22:18

Людмила, все добавляете по образцу и подобию.
К меню добавляет класс “float-menu”.
В CSS файле вставляете все стили, те то указаны в статье. В хедер между тегами вставляете скрипт.
Для более подробного описания, нужно писать целую незапланированную статью. Может, если эта тема будет актуальная для всех, я напишу специально статью. Спасибо, Людмила, за комментарий.
Эдуард

20.09.2016 в 09:51

Добрый день) Степан у меня такой вопрос. что надо в css изменить , чтоб обычное горизонтальное меню стало выпадающим. Заранее спасибо.

Степан => автор блога

27.09.2016 в 11:00

Добрый день, Эдуард.
Выпадающее меню скрывается с помощью

.submenu {display: none;}

при наведении показывается с помощью

.topmenu li:hover .submenu 
{display: block;}

Например:

<nav class="one">
  <ul class="topmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a>
      <ul class="submenu">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

В CSS:

ul {
  list-style: none; 
  margin: 0;
  padding: 0;
}
.topmenu > li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}

.submenu {
  position: absolute;
}

.one .submenu {
  display: none;
  background: #b19891;
}
.one ul li:hover .submenu {
  display: block;
}