Страница 1 из 11
Форум » Web дизайн » HTML и CSS » DIV-ное меню сайта (DIV-ы в свободном плаванье)
DIV-ное меню сайта
Reddy Дата: Вторник, 31.01.2012, 19:32 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Особенность данного меню заключается в том, что для его создания используется заданное смещение относительно начальной точки (вверх страницы, например), и возможность отображения в любом месте сайта поверх других элементов.

Итак, начнём с HTML кода. Тут немного изменённый код из данного урока:

Code
<html>
<head>
<title>Меню сайта</title>
<link  href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div align="center"><!-- задаём размещение по центру -->
<div id="container"><!-- контейнер для шапки и меню -->
<div id="menu"><!-- меню -->
<ul class="navigation">      
<li><a href="/" title="Ваш текст описания">Главная</a></li>
<li><a href="/" title="Ваш текст описания">Форум</a></li>
<li><a href="/" title="Ваш текст описания">Гостевая книга</a></li>
<li><a href="/" title="Ваш текст описания">О нас</a></li>
</ul>
</div>
<!-- контейнер для шапки -->
<div id="logo">www.OtherSide.ws</div>
</div>
</div>

</body>
</html>


Обратите внимание, что контейнер MENU в данном случае расположен перед контейнером LOGO, поверх которого он будет отображаться.

Естественно, чтобы задать всю красоту и функциональность применяем CSS (подробности там же):
Code
body {
              background: #000000;
              font-family: Verdana;
              font-size: 11px;
}
#container {
              width: 990px; /* ширина шапки и меню */
              text-align: left;
}
#menu {
              border: 1px solid #8f00bf;
              position: absolute; /* "абсолютно независимое" размещение данного блока */
              margin: 50px 0 0 400px; /* отступ от края (вверх-правая сторона-низ-левая сторона). В данном случае отступ от верхнего края 50px, от левого - 400px */
}
.navigation {
              margin: 0;
              padding: 0;
}
.navigation li {
              float: left;
              list-style-type: none;
}
.navigation li a {
              color: #dfdfdf;
              font-size: 13px;
              text-decoration: none;
              display: block;
              padding: 10px 0;
              width: 140px;
              text-align: center;
}
.navigation li a:hover {
              background: #8f00bf;
              color: #ffffff;
}
#logo {
              font-size: 36px;
              color: #00df00;
              padding: 40px 0 50px 30px;
}


Как это выглядит в жизни можно посмотреть тут. Только HTML CSS, и никакого мошенничества :) Естественно, что вы можете сами оформить данные блоки как вам хочется, менять цвет, шрифт, использовать нужный вам фон.
спец по кнопачкам
 
Форум » Web дизайн » HTML и CSS » DIV-ное меню сайта (DIV-ы в свободном плаванье)
Страница 1 из 11
Поиск:
Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика
Полное или частичное копирование материалов только с указанием гиперссылки на www.otherside.ws

© 2010-2017 Other Side | Хостинг от uCoz