BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

Понравилась демонстрация?
Пробуем такое же сделать самостоятельно.
Для этого возьмите стандартный 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>

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

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

Получай обновления блога!!! Подпишись:

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

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

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

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

  2. Людмила Лао

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

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

    Здравствуйте, Тамара! Я ВКонтакте с 7:30 до 16:15.

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

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

  5. Эдуард

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

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

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

    .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;
    }
    
  7. Эдуард

    Спасибо Степан)

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки:

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4540