» »

Верхнее меню для сайта системы ucoz


Удобное горизонтальное темное меню для сайта системы ucoz. В нем расположено такие элементы как вход и регистрация на сайт. Так же есть окно под ваш Avatar. Так же с него можно узнать пришло вам сообщение или нет и много другого что нужно меню сайта.
Переходим к установке:
Сам код вставляем в верх глобального блока вашего сайта, или на всех страницах сайта в самый верх.
Код
<style>  
*/article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{  
  display:block  
}  
.navbar-fixed-top {  
  top: 0px;  
}  
.navbar-fixed-top, .navbar-fixed-bottom {  
  position: fixed;  
  right: 0px;  
  left: 0px;  
  z-index: 1030;  
  margin-bottom: 0px;  
}  
.navbar {  
  overflow: visible;  
  margin-bottom: 20px;  
}  
.navbar-inverse .navbar-inner {  
  background-color: rgb(27, 27, 27);  
  background-image: linear-gradient(to bottom, rgb(34, 34, 34), rgb(17, 17, 17));  
  background-repeat: repeat-x;  
  border-color: rgb(37, 37, 37);  
}  
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {  
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);  
}  
.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {  
  padding-left: 0px;  
  padding-right: 0px;  
  border-radius: 0px 0px 0px 0px;  
}  
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {  
  border-width: 0px 0px 1px;  
}  
.navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {  
  width: 940px;  
}  
.navbar .container {  
  width: auto;  
}  
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {  
  width: 940px;  
}  
.container {  
  margin-right: auto;  
  margin-left: auto;  
}  
.navbar .brand {  
  color: rgb(255, 255, 255);  
  font-family: museo-slab,"Helvetica Neue",Helvetica,Arial,sans-serif;  
}  
.navbar-inverse .brand {  
  color: rgb(153, 153, 153);  
}  
.navbar-inverse .brand, .navbar-inverse .nav > li > a {  
  color: rgb(153, 153, 153);  
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);  
}  
.navbar .brand {  
  float: left;  
  display: block;  
  padding: 10px 20px;  
  margin-left: -20px;  
  font-size: 20px;  
  font-weight: 200;  
  color: rgb(119, 119, 119);  
  text-shadow: 0px 1px 0px rgb(255, 255, 255);  
}  
a {  
  color: rgb(200, 48, 37);  
  text-decoration: none;  
}  
.navbar .brand .icon-flag {  
  padding-right: 3px;  
}  
a [class^="icon-"], a [class*=" icon-"] {  
  display: inline-block;  
}  
[class^="icon-"], [class*=" icon-"] {  
  font-family: FontAwesome;  
  font-weight: normal;  
  font-style: normal;  
  text-decoration: inherit;  
  display: inline;  
  width: auto;  
  height: auto;  
  line-height: normal;  
  vertical-align: baseline;  
  background-image: none;  
  background-position: 0% 0%;  
  background-repeat: repeat;  
  margin-top: 0px;  
}  
.icon-flag {  
  background-position: -312px -24px;  
}  
[class^="icon-"], [class*=" icon-"] {  
  display: inline-block;  
  width: 14px;  
  height: 14px;  
  line-height: 14px;  
  vertical-align: text-top;  
  background-image: url("../img/glyphicons-halflings.png");  
  background-position: 14px 14px;  
  background-repeat: no-repeat;  
  margin-top: 1px;  
}  
.navbar .nav {  
  position: relative;  
  left: 0px;  
  display: block;  
  float: left;  
  margin: 0px 10px 0px 0px;  
}  
.nav {  
  margin-left: 0px;  
  margin-bottom: 20px;  
  list-style: none outside none;  
}  
ul, ol {  
  padding: 0px;  
  margin: 0px 0px 10px 25px;  
}  
.navbar .nav > li {  
  float: left;  
}  
li {  
  line-height: 20px;  
}  
.nav {  
  list-style: none outside none;  
}  
.navbar .nav > li > a {  
  padding: 12px 10px 9px;  
}  
.navbar-inverse .brand, .navbar-inverse .nav > li > a {  
  color: rgb(153, 153, 153);  
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);  
}  
.navbar .nav > li > a {  
  float: none;  
  padding: 10px 15px;  
  color: rgb(119, 119, 119);  
  text-decoration: none;  
  text-shadow: 0px 1px 0px rgb(255, 255, 255);  
}  
.nav > li > a {  
  display: block;  
}  
a {  
  color: rgb(200, 48, 37);  
  text-decoration: none;  
}  
li {  
  line-height: 20px;  
}  
.nav {  
  list-style: none outside none;  
}  
.navbar .nav > li {  
  float: left;  
}  
.dropup, .dropdown {  
  position: relative;  
}  
li {  
  line-height: 20px;  
}  
.nav {  
  list-style: none outside none;  
}  
.dropdown-menu {  
  position: absolute;  
  top: 100%;  
  left: 0px;  
  z-index: 1000;  
  display: none;  
  float: left;  
  min-width: 160px;  
  padding: 5px 0px;  
  margin: 2px 0px 0px;  
  list-style: none outside none;  
  background-color: rgb(255, 255, 255);  
  border: 1px solid rgba(0, 0, 0, 0.2);  
  border-radius: 6px 6px 6px 6px;  
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);  
  background-clip: padding-box;  
}  
ul ul, ul ol, ol ol, ol ul {  
  margin-bottom: 0px;  
}  
ul, ol {  
  padding: 0px;  
  margin: 0px 0px 10px 25px;  
}  
li {  
  line-height: 20px;  
}  
.dropdown-menu {  
  list-style: none outside none;  
}  
.nav {  
  list-style: none outside none;  
}  
.dropdown-menu .divider {  
  height: 1px;  
  margin: 9px 1px;  
  overflow: hidden;  
  background-color: rgb(229, 229, 229);  
  border-bottom: 1px solid rgb(255, 255, 255);  
}  
li {  
  line-height: 20px;  
}  
.dropdown-menu {  
  list-style: none outside none;  
}  
.nav {  
  list-style: none outside none;  
}  
.navbar .nav.pull-right {  
  float: right;  
  margin-right: 0px;  
}  
.navbar .nav {  
  position: relative;  
  left: 0px;  
  display: block;  
  float: left;  
  margin: 0px 10px 0px 0px;  
}  
.pull-right {  
  float: right;  
}  
.pull-right {  
  float: right;  
}  
.nav {  
  margin-left: 0px;  
  margin-bottom: 20px;  
  list-style: none outside none;  
}  
ul, ol {  
  padding: 0px;  
  margin: 0px 0px 10px 25px;  
}  
</style>  
<div class="navbar navbar-inverse navbar-fixed-top">  
<div class="navbar-inner">  
<div class="container">  
<a class="brand" href="/"><i class="icon-flag"></i> Главная страница</a>  
<ul class="nav">  
<li><a href="/forum"> Форум</a></li>  
<li class="dropdown">  
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-play"></i>  
  Меню сайта  
<i class="icon-caret-down"></i>  
</a>  
<ul class="dropdown-menu" role="menu">  
<li><a href="/news">Новости</a></li>  
<li class="divider"></li>  
<li class="nav-header">Полное меню</li>  
<li><a href="/blog"><i class="icon-edit"></i>Блог сайта</a></li>  
<li><a href="/publ"><i class="icon-save"></i>Статьи сайта</a></li>  
<li><a href="/load"><i class="icon-hand-right"></i>Каталог файлов</a></li>  
<li><a href="/video"><i class="icon-play"></i>Видео сайта</a></li>  
<li><a href="/photo"><i class="icon-github"></i>Фото сайта</a></li>  
<li><a href="/forum"><i class="icon-stethoscope"></i>Форум</a></li>  
</ul>  
</li>  
   
<li><a href="#integration">Обратная связь</a></li>  
  <li><a href="#examples">Гостевая книга</a></li>  
   
<style> .coment_avatar {  
  float:left;  
  width:35px;  
  height:35px;  
  background: #F3F3F3;  
  margin-left: 5px;  
margin-top: 2px;  
  padding: 1px;  
  border:1px solid #C8D9E5;  
  } </style>  
<?if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$" target="_blank"><img class="coment_avatar" src="$USER_AVATAR_URL$" /></a><?else?><img class="coment_avatar" src="http://zornet.ru/ZORNET-RU/noava.jpeg" alt="no" /><?endif?>  

  <?if($USER_LOGGED_IN$)?>  
<li><a href="$LOGOUT_LINK$"> Выход</a></li>  
<?else?>  
<li><a href="$REGISTER_LINK$"> Регистрация</a></li>  
<li><a href="$LOGIN_LINK$"> Вход</a></li>  
<?endif?>  

   
</ul>  
<ul class="nav pull-right">  
  <li><a href="Ваша почта"><i class="icon-envelope"></i> Моя почта</a></li>  
</ul>  
</div>  
</div>  
</div>
19.04.2013 Просмотров: 1320 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
doni
doni 19.04.2013 23:251
0
Kosten , а что я не могу писать в чат выдают ошибку 404 когда я нажимаю отправить ???? sad
Kosten
Kosten 20.04.2013 09:322
0
doni, даже не в курси почему у тебя так.
avatar