» »

Фиксированное горизонтальное меню на CSS

Фиксированное горизонтальное меню на CSS

Это горизонтальное меню отличается тем, что при прокрутке в низ страницы, они становится вверх, если вы даже поставили под шапку сайта. Также на нем присутствует эффект, который заключается как стилистике так и при наведение курсора. По умолчанию когда оно поднимется вверх, то будет прозрачным. Что оттенок цвета вы сами ставите под свой сайт, все настройки идут в CSS. Но только вы на его наведете курсор, так меню становится в оттенке цвета уже не прозрачным и также категорий или разделы, что на нем прописали стоят под эффектом красивым. вообщем как поняли, вы устанавливаете его по умолчанию и выставляете размер ширины, где оно может быть фиксировано, что показано на демонстраций, которые вы можете посмотреть.

Но только вы начали опускать страницу, то здесь автоматически срабатывает и устанавливается в самый потолок монитора и уже будет на весь экран. Оно подойдет под блог или полноценный интернет ресурс. Так как сейчас много порталов идут с различными фиксаторами и элементами на разнообразные эффекты. Где И так горизонтальное меню безусловно подойдет на на такие площадки. Но главное, оно будет нести функцию навигаций для пользователя, который безусловно заметит его.Что можно в него под ссылки поставить самые актуальные запросы по вашему сайту, что и будет отличным решение, это уникальность его в работе.

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

Скрипт для фиксаций горизонтального меню сайта

Это вы выбераете куда перейти и уже видим, что прозрачность исчезла.

Меню для сайта с эффектом фиксаций

Приступаем к установке:

Для начало основной код, который выставляем, где хотите его видеть.

Код
<div id="menu" class="default">  
<ul>  
<li><a href="http://zornet.ru/">Главная zornet.ru</a></li>  
<li><a href="http://zornet.ru/load/84">Меню для сайта</a></li>  
<li><a href="http://zornet.ru/load/81">Скрипты</a></li>  
<li><a href="http://zornet.ru/load/145">Блог сайта zornet.ru</a></li>  
</ul>  
</div>

Таблица стилей и ставим в CSS:

Код
/*main menu*/  
  #menu {  
  text-transform: uppercase;  
  text-align: center;  
  line-height: 50px;  
  background: #69c;  
   
  text-shadow:0 1px 1px black;  
  -moz-border-radius: 5px;  
  -webkit-border-radius:5px;  
  border-radius:5px;  
  }  
  #menu ul {padding:0; margin:0;}  
  #menu li{  
  display: inline;  
  list-style:none;  
  margin: 5px 10px;  
  }  
   
  #menu li a {  
  padding:5px 10px;  
  color:#fff;  
  text-decoration: none;  
   
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  

  }  
   
  #menu li a:hover{  
  background: #36c;  
  color: #ff0;  

  -webkit-transition-property: color, background;  
  -webkit-transition-duration: 0.5s, 0.5s;  
  }  
  .default {  
  width:920px;  
  }  
  .fixed {  
  position:fixed;  
  top:-5px; left:0;  
  width:100%;  
  padding:10px 0;  
   
  -moz-box-shadow: 5px 5px 20px #333;  
  -webkit-box-shadow: 5px 5px 20px #333;  
  box-shadow: 5px 5px 20px #333;  
  }  
  .transbg {  
  background-color: rgba(60, 130, 190, 0.7)!important;  
  }

Нужно выставить скрипт, что отвечает за фиксацию и здесь также его ставим вверх сайта в hеаd заключаем.

Код
<script type="text/javascript">  
  $(document).ready(function(){  
   
  var $menu = $("#menu");  
   
  $(window).scroll(function(){  
  if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){  
  $menu.fadeOut('fast',function(){  
  $(this).removeClass("default")  
  .addClass("fixed transbg")  
  .fadeIn('fast');  
  });  
  } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {  
  $menu.fadeOut('fast',function(){  
  $(this).removeClass("fixed transbg")  
  .addClass("default")  
  .fadeIn('fast');  
  });  
  }  
  });//scroll  
   
  $menu.hover(  
  function(){  
  if( $(this).hasClass('fixed') ){  
  $(this).removeClass('transbg');  
  }  
  },  
  function(){  
  if( $(this).hasClass('fixed') ){  
  $(this).addClass('transbg');  
  }  
  });//hover  
  });//jQuery  
</script>

Если у тебя не конструктор uCoz, так как там идет библиотека уже в теле сайта, вам нужно поставить на страницах в hеаd где будет меню.

Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>

На этом вся установка, не забываем все сохранить и также демонстрацию на материал посмотреть.
14.08.2017 Просмотров: 376 Комментарий: (5)

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

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

Комментарий: 5
Critic©
Critic© 14.08.2017 20:121
0
Из ходя из DEMO, что здесь идет, то мне так видно, на фиксированную ширину сайта не очень подойдет, но с другой стороны, оно как раз под вверх сайта будет смотреться чем на широком. Хотя оно не чем от простого не отличается, но здесь не упомянули за тени, что на светлом фоне очень заметны, если их убрать, то согласен, что стандартное. Но ставить не буду, просто стараюсь все что касается эффектов не устанавливать, для этого нужно создавать сайт, что видел один и там оно бы все верно подошло.
Kosten
Kosten 14.08.2017 20:242
0
Что то об этом даже не задумывался, где больше подойдет на фиксированной ширине или нет. Хотя сейчас все шаблоны идут с фиксацией, просто где то больше, где то меньше. Все же также считаю, что на такой сайт можно поставить, но как то не очень будет с одним эффектом, когда на сайте его больше, то положение просто уравнивается, что не заостряется на одно внимание.
Critic©
Critic© 14.08.2017 22:033
0
Лучше сразу делать его не прозрачным, но если только не на темном фоне установлено меню будет, там не так сильно заметно, и тени не нужны.
Kosten
Kosten 14.08.2017 23:574
0
Здесь уже сам веб мастер разберется, оставить его прозрачным, хотя прозрачность нормально и на светлом фоне будет, если посмотреть демонстрацию.
Kosten
Kosten 15.08.2017 20:485
0
На демонстраций только сейчас заметил, что у него нижнее углы закругленные, что когда на всю ширину становиться с левой стороны сильно видно, то здесь можно их убрать, что по умолчанию сразу сделать без нижних закруглений.
avatar