Особенность данного меню заключается в том, что для его создания используется заданное смещение относительно начальной точки (вверх страницы, например), и возможность отображения в любом месте сайта поверх других элементов.
Итак, начнём с 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, и никакого мошенничества Естественно, что вы можете сами оформить данные блоки как вам хочется, менять цвет, шрифт, использовать нужный вам фон.