» »

Простенькое горизонтальное меню на uCoz


Простенькое горизонтальное меню на uCoz

Если у вас блок или хотите его создать, то рекомендую обратить на эту навигацию. Так как на фиксированный конструктор сайта оно подойдет отлично. Имеет 2 оттенка цвета, основной светлый и при наведение будет подчеркивать красным, где в стилях, вы можете поменять гамму. Это простенькое горизонтальное меню, ну довольно не плохое. Как видим, горизонтальное меню использует всего два тона, и можно поставить, как на темные так и на светлые интернет ресурсы. Данное меню сделано под разную тематику, будь это игры, или кулинария.

Верхняя часть сайта:

Код
<nav id="topmenu">  
   
  <a href="#" class="selected">ГЛАВНАЯ</a>  
   
  <a href="http://zornet.ru/">ZORNET.Ru - скрипты для uCoz</a>  
   
  <a href="#">ФОРУМ</a>  
   
  <a href="#">ЧАТ</a>  
   
  <a href="#">ПРАВИЛА</a>  
   
  <a href="#">F.A.Q.</a>  
  </nav>


Css:

Код
nav#topmenu {  
  position:absolute;  
  margin:30px 0px 0px 500px;  
  font-family: 'PT Sans', sans-serif;  
  font-weight:400;  
  padding: 24px 0;  
  text-align: center;  
}  

nav#topmenu a, nav#topmenu a:visited {  
  transition: 0.3s ease;  
  background: #fff;  
  color: #626262;  
  font-size: 13pt;  
  text-decoration: none;  
  outline:none;  
  border-top: 4px solid #fff;  
  border-bottom: 4px solid #fff;  
  padding: 20px 0;  
  margin: 0 2px;  
}  

nav#topmenu a:hover {  
  color:#d52c43;  
  font-weight:700;  
  border-top: 4px solid #d52c43;  
  border-bottom: 4px solid #d52c43;  
  padding: 6px 0;  
}  

nav#topmenu a.selected {  
  border-top:4px solid #d52c43;  
  padding: 6px 0;  
  color:#d52c43;  
  font-weight:700;  
}


(rip Бармен) - он же JoniDen.
15.10.2016 Просмотров: 408 Комментарий: (27)

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

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

Комментарий: 27
Kosten
Kosten 15.10.2016 19:121
0
Такое меню подойдет под блог, или сайт где слишком фиксированная ширина.
JoniDen
JoniDen 15.10.2016 19:142
0
Возможно)
Kosten
Kosten 15.10.2016 19:223
0
В описание добавил, что красное подчеркивание категорий можно вывести на другой оттенок, так как светло алый дизайн не так уж распространен.
JoniDen
JoniDen 15.10.2016 19:264
0
А да кстати забыл спасибо. А так вообще по мне красный лучше.
Советник
Советник 15.10.2016 19:265
0
Мне вот всегда простое больше нравится, а не где всякие кнопки, главное чтоб понятно было, хорошее меню.
JoniDen
JoniDen 15.10.2016 19:287
0
Это замечательно теперь буду знать.
Kosten
Kosten 15.10.2016 19:329
0
Но для пользователя что нужно, это понятная навигация, и поиск по сайту под боком, здесь явно понятное, а с кнопками если идет, это просто для стилистики сайта, вообщем для украшение.
JoniDen
JoniDen 15.10.2016 19:3611
0
Ну поиск добавить не проблема, тем кто шарит. А для других да беда.
Сафрон
Сафрон 15.10.2016 19:286
0
Советник, вот здесь с тобой полностью согласен, что простое, оно и понятнее, и всегда можно настроить как нужно.
Kosten
Kosten 15.10.2016 19:308
0
Да это меню, чем то похоже на навигацию, что стоит на этом сайте, просто по дизайн и по функциям.
Сопрано
Сопрано 15.10.2016 19:3510
0
А, вообще заметили, что как вертикальное или горизонтальное меню теперь идет только на стилях, не нужно не чего закидывать в корень сайта, как ранее было.
JoniDen
JoniDen 15.10.2016 19:3712
0
Ну это же замечательно меньше мороки.
FeStemBer
FeStemBer 15.10.2016 19:3913
0
Есть такие, что меню ставишь и скачиваешь, а там всего одна кнопка, но сразу в стили прописать нельзя, но с другой стороны, ссылка может оказаться битой, а здесь все можно сделать.
Kosten
Kosten 15.10.2016 19:4214
0
Все правильно и потому закидывают, но больше всего, даже здесь можно поставить шрифтовые значки, сейчас где только их не устанавливают, и где нужно, и где они совершенно не подходят.
Angerfist
Angerfist 15.10.2016 19:4415
+2
Если разрешите я добавлю кое что?) Предлагаю меню сразу по центру делать а не от левого края на 500px:
вместо
Код

nav#topmenu {  
  position:absolute;  
  margin:30px 0px 0px 500px;  

на это
Код

nav#topmenu {  
position:relative;  
margin:30px auto;

30px отступ сверху
JoniDen
JoniDen 15.10.2016 19:4516
0
Да по центру. И да можешь изменять его как хочешь, меню в общем доступе.
Angerfist
Angerfist 15.10.2016 19:4817
0
Спасибо) я так умничаю от делать нефиг, само меню пока не нужно их есть у меня)
JoniDen
JoniDen 15.10.2016 19:5821
0
Учишься работать с HTML и CSS?
Angerfist
Angerfist 15.10.2016 20:0725
0
Не учусь, давно изучил, веб разметка это пустяки по сравнению с веб языками типа перл и пхп, изучаю до конца js, но никак не удаётся дочитать Современный учебник JavaScript )
Теория есть теория, пока применишь на практике мозг закипает к новой теме переходить)))
JoniDen
JoniDen 15.10.2016 20:1527
0
Ну не знаю я сам C# и C++ выучу, и как выучу займусь JS ну или Java изучать.
Kosten
Kosten 15.10.2016 19:5018
0
Да, здесь полностью согласен, по центру сразу установится по умлчанию, если авто прописано в стилях.
Angerfist
Angerfist 15.10.2016 19:5219
0
Это если relative, при position:absolute, auto бы здесь ничего не сделало)
Kosten
Kosten 15.10.2016 19:5620
0
Angerfist, привет, немного по умничай) и сможешь вывести код, чтоб он по умолчанию вставал, а не подгонять по длине.
Angerfist
Angerfist 15.10.2016 20:0122
0
Так он и так будет по умолчанию по центру с поправкой, длина всё равно зависит от кол-ва пунктов меню и длины самих надписей. Чётко всё настроить можно только с абсолютным позиционированием, как автор выложил.
Kosten
Kosten 15.10.2016 20:0624
0
Так это отлично. еще твоя методичка в помощь будет, вот что значит, нужно всегда читать комментарий.
Советник
Советник 15.10.2016 20:0323
0
Его не только на фикстрованную ширину иожно ставить и на полноценный сайт.
Angerfist
Angerfist 15.10.2016 20:0826
0
Comment removed by the user
avatar