Блог

Это очень удобное меню на css.
Если пользователь ещё не вошёл, то оно будет выглядеть так:

А если уже вошёл, то так:

так же, если придут сообщения, это отобразится в меню (кнопочка с сообщениями начнёт мигать, а при наведении на неё отобразится кол-во непрочитанных сообщений)
Итак, установка:
Это ставим в "Верхняя часть сайта" в самый низ:

Code

<div id="main">
 <ul id="navigationMenu">
 <li>
 <a class="m_home " href="$HOME_PAGE_LINK$">Главная</a>

 <li>
 <a class="m_forum" href="/forum">Форум</a>
 </li>

 <li>
 <a class="m_admin" href="/index/admin/0-4">Администрация</a>
 </li>

 <li>
 <a class="m_video" href="/index/kinoteatr/0-31">Кинотеатр</a>
 </li>

 <li>
 <a class="m_game" href="/index/game_in_flood/0-17">Игры</a>
 </li>

 <li>
 <a class="m_vixod" href="$LOGOUT_LINK$">Выход</a>
 </li>

 <li>
 <a class="m_vxod" href="$LOGIN_LINK$">Вход</a>
 </li>


 </ul>
 </div>

<div id="p">
 <ul id="panel">

 <li>
 <a class="m_profile" href="$PERSONAL_PAGE_LINK$" target="blank">Профиль</a>
 </li>


 <li>
 <a class="m_unread_pm" href="$PM_URL$" target="blank">Сообщения ($UNREAD_PM$)</a>
 </li>

 <li>
 <a class="m_message" href="$PM_URL$" target="blank">Сообщения</a>
 </li>


 </ul>
 </div>

А это в "Таблица стилей CSS":

Code

/*--------------------- Search start ---------------------*/
.poisk{
  position:fixed;
  background-image:-webkit-linear-gradient(bottom,#426BFF,#60A5FF);
  background-image:-moz-linear-gradient(bottom,#426BFF,#60A5FF);
  background-image:-o-linear-gradient(bottom,#426BFF,#60A5FF);
  background-image:linear-gradient(bottom,#426BFF,#60A5FF);
  -webkit-box-shadow:0 0 3px black;
  -moz-box-shadow:0 0 3px black;
  -o-box-shadow:0 0 3px black;
  box-shadow:0 0 3px black;
  border:1px solid #404040;
  left:-200px;
  width:240px;
  height:30px;
  border-radius:3px;
  top:80px;
  color:white;
  text-shadow:0 0 3px black;
  -webkit-transition:all 0.4s ease;
  -moz-transition:all 0.4s ease;
  -o-transition:all 0.4s ease;
  transition:all 0.4s ease;
  padding:3px;
  }
  .poisk:hover{
  left:-3px;
  }
  .poisk #search{
  width:175px;
  position:relative;
  top:3px;
  left:5px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius:3px;
  border:1px solid #606060;
  height:26px;
  }
  .poisk:hover #search{
  width:230px;
  }
  #search{
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease;
  transition:all 0.2s ease;
  }
  #search:focus{
  border:1px solid #404040;
  -webkit-box-shadow:inset 1px 1px 3px #ccc;
  -moz-box-shadow:inset 1px 1px 3px #ccc;
  box-shadow:inset 1px 1px 3px #ccc;
  }
  .poisk:hover #poiskknopka{
  display:none;
  }
/*--------------------- Search end ---------------------*/

/*--------------------- Menu start ---------------------*/
#main{
  position:fixed;
  top: 150px;
  left: 0px;
  padding:0;
  }

  #main ul{
  padding:0;
  }

  #navigationMenu li{
  list-style:none;
  height:35px;
  width:35px;
  }

  #navigationMenu span{
  position:absolute;
  overflow:hidden;
  width:0;
  left:35px;
  padding:0;
  font:12px Verdana,Arial,Helvetica,sans-serif;
  font-weight:bold;
  line-height:35px;
  white-space:nowrap;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
  }

  #navigationMenu a{
  display:block;
  position:relative;
  background:url(/images/menu.gif) no-repeat;
  height:35px;
  width:35px;
  }

  #navigationMenu a:hover span{
  overflow:hidden;
  text-align:center;
  width:110px;
  padding:0px 10px;
  }

  #navigationMenu a:hover{
  text-decoration:none;
  }

  #navigationMenu .m_home {background-position:0 0;}
  #navigationMenu .m_home :hover {background-position:0 -35px;}
  #navigationMenu .m_home span{
  background:#7da315;
  color:#3d4f0c;
  text-shadow:1px 1px 0 #99bf31;
  }

  #navigationMenu .m_forum {background-position:-70px 0;}
  #navigationMenu .m_forum:hover {background-position:-70px -35px;}
  #navigationMenu .m_forum span{
  background:#c86c1f;
  color:#5a3517;
  text-shadow:1px 1px 0 #d28344;
  }

  #navigationMenu .m_admin { background-position:-245px 0;}
  #navigationMenu .m_admin:hover { background-position:-245px -35px;}
  #navigationMenu .m_admin span{
  background-color:#1E98BE;
  color:#223a44;
  text-shadow:1px 1px 0 #44a8d0;
  }

  #navigationMenu .m_video { background-position:-105px 0;}
  #navigationMenu .m_video:hover{ background-position:-105px -35px;}
  #navigationMenu .m_video span{
  background-color:#616161;
  color:#000000;
  text-shadow:1px 1px 0 #616161;
  }

  #navigationMenu .m_game {background-position:-35px 0;}
  #navigationMenu .m_game:hover {background-position:-35px -35px;}
  #navigationMenu .m_game span{
  background:#769800;
  color:#3d4f0c;
  text-shadow:1px 1px 0 #99bf319;
  }

  #navigationMenu .m_vxod { background-position:-175px 0;}
  #navigationMenu .m_vxod:hover { background-position:-175px -35px;}
  #navigationMenu .m_vxod span{
  background-color:#af1e83;
  color:#460f35;
  text-shadow:1px 1px 0 #d244a6;
  }

  #navigationMenu .m_vixod { background-position:-210px 0;}
  #navigationMenu .m_vixod:hover { background-position:-210px -35px;}
  #navigationMenu .m_vixod span{
  background-color:#27ddbf;
  color:#097863;
  text-shadow:1px 1px 0 #87ffe7;
  }
/*--------------------- Menu end ---------------------*/

/*--------------------- User panel start ---------------------*/
#p{
  position:fixed;
  top: 380px;
  left: 0px;
  padding:0;
  }

  #p ul{
  padding:0;
  }

  #panel li{
  list-style:none;
  height:35px;
  width:35px;
  }

  #panel span{
  position:absolute;
  overflow:hidden;
  width:0;
  left:35px;
  padding:0;
  font:12px Verdana,Arial,Helvetica,sans-serif;
  font-weight:bold;
  line-height:35px;
  white-space:nowrap;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
  }

  #panel a{
  display:block;
  position:relative;
  background:url(/images/menu.gif) no-repeat;
  height:35px;
  width:35px;
  }

  #panel a:hover span{
  overflow:hidden;
  text-align:center;
  width:110px;
  padding:0px 10px;
  }

  #panelu a:hover{
  text-decoration:none;
  }

  #panel .m_profile {background-position:-315 0;}
  #panel .m_profile :hover {background-position:-315 -35px;}
  #panel .m_profile span{
  background:#6e8e00;
  color:#404b1b;
  text-shadow:1px 1px 0 #6e8e00;
  }

  #panel .m_unread_pm {background-position:-280 0;}
  #panel .m_unread_pm :hover {background-position:-280 -35px;}
  #panel .m_unread_pm span{
  background:#FFCC00;
  color:#5a3517;
  text-shadow:1px 1px 0 #FFCC00;
  }

  #panel .m_message {background-position:-140 0;}
  #panel .m_message :hover {background-position:-140 -35px;}
  #panel .m_message span{
  background:#FFCC00;
  color:#5a3517;
  text-shadow:1px 1px 0 #FFCC00;
  }

/*--------------------- User panel end ---------------------*/

Разберёмся в значении некоторых полей, чтобы легче было отредактировать.

Здесь прописано положение картинки.

Code

#panel .m_message {background-position:-140 0;}

По умолчанию вырезается картинка 35x35. Но это легко можно изменить вот здесь:

Code

  #panel li{
  list-style:none;
height:35px;
  width:35px;
  }

Для каждого пункта меню есть определённый цвет фона, текста, тени. Цвета изменяются вот здесь (background - это цвет фона, color - цвет текста и text-shadow - это цвет тени):

Code

  #panel .m_message {background-position:-140 0;}
  #panel .m_message :hover {background-position:-140 -35px;}
  #panel .m_message span{
background:#FFCC00;
  color:#5a3517;
  text-shadow:1px 1px 0 #FFCC00;

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

За положение меню относительно верха сайта отвечает вот это:

Поиск:

Code

Основное меню:

Code

/*--------------------- Menu start ---------------------*/
#main{
  position:fixed;
top: 150px;
  left: 0px;
  padding:0;
  }

И панель пользователя:

Code

/*--------------------- User panel start ---------------------*/
#p{
  position:fixed;
top: 380px;
  left: 0px;
  padding:0;
  }

Особенности:
1. Поиск не относится к меню. На самом деле это просто отдельный наворот, который я подогнал под меню. При желании его легко можно убрать. Каждая часть меню закомментирована - разобраться не трудно =)

2. Картинка выполнена в формате .gif, что собственно и даёт эффект мигания при новом сообщении. Конечно, не айс, но я выложу две картинки-исходника. При желании, можно вставить в эти обе картинки свои иконки (если ставите не по порядку, укажите положение иконки соответственно пункту меню) и потом слепить их в программке для создания .gif-ов. Интервал между этими двумя кадрами установите сами и сделаете, чтобы повторялось постоянно.

Всё картинки есть в прикреплённом архиве. Картинки из папки images залить в соответствующую папку. Можно, конечно, и в другую, но исправьте ссылку на расположение картинки.

Исходный код самого меню взят отсюда:
http://kloun-na.ucoz.com/load/15-1-0-462
Поиск откуда брал - не помню. Но всё равно спасибо огромное его создателю!

Скачать архив