ZorNet.Ru — сайт для вебмастера » Меню для сайта » Простенькое горизонтальное меню на 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 Октября 2016 Просмотров: 1794 Комментариев: (27)

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

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

JoniDen

Похожие материалы

Оставь свой отзыв

Комментарии: 27
Порядок вывода комментариев: Kosten 15 Октября 2016 19:12¹ 0 Такое меню подойдет под блог, или сайт где слишком фиксированная ширина. JoniDen 15 Октября 2016 19:14² 0 Возможно) Kosten 15 Октября 2016 19:22³ 0 В описание добавил, что красное подчеркивание категорий можно вывести на другой оттенок, так как светло алый дизайн не так уж распространен. JoniDen 15 Октября 2016 19:26⁴ 0 А да кстати забыл спасибо. А так вообще по мне красный лучше. Советник 15 Октября 2016 19:26⁵ 0 Мне вот всегда простое больше нравится, а не где всякие кнопки, главное чтоб понятно было, хорошее меню. JoniDen 15 Октября 2016 19:28⁷ 0 Это замечательно теперь буду знать. Kosten 15 Октября 2016 19:32⁹ 0 Но для пользователя что нужно, это понятная навигация, и поиск по сайту под боком, здесь явно понятное, а с кнопками если идет, это просто для стилистики сайта, вообщем для украшение. JoniDen 15 Октября 2016 19:36¹¹ 0 Ну поиск добавить не проблема, тем кто шарит. А для других да беда. Сафрон 15 Октября 2016 19:28⁶ 0 Советник, вот здесь с тобой полностью согласен, что простое, оно и понятнее, и всегда можно настроить как нужно. Kosten 15 Октября 2016 19:30⁸ 0 Да это меню, чем то похоже на навигацию, что стоит на этом сайте, просто по дизайн и по функциям. Сопрано 15 Октября 2016 19:35¹⁰ 0 А, вообще заметили, что как вертикальное или горизонтальное меню теперь идет только на стилях, не нужно не чего закидывать в корень сайта, как ранее было. JoniDen 15 Октября 2016 19:37¹² 0 Ну это же замечательно меньше мороки. FeStemBer 15 Октября 2016 19:39¹³ 0 Есть такие, что меню ставишь и скачиваешь, а там всего одна кнопка, но сразу в стили прописать нельзя, но с другой стороны, ссылка может оказаться битой, а здесь все можно сделать. Kosten 15 Октября 2016 19:42¹⁴ 0 Все правильно и потому закидывают, но больше всего, даже здесь можно поставить шрифтовые значки, сейчас где только их не устанавливают, и где нужно, и где они совершенно не подходят. Angerfist 15 Октября 2016 19:44¹⁵ +2 Если разрешите я добавлю кое что?) Предлагаю меню сразу по центру делать а не от левого края на 500px: вместо Код nav#topmenu { position:absolute; margin:30px 0px 0px 500px; на это Код nav#topmenu { position:relative; margin:30px auto; 30px отступ сверху JoniDen 15 Октября 2016 19:45¹⁶ 0 Да по центру. И да можешь изменять его как хочешь, меню в общем доступе. Angerfist 15 Октября 2016 19:48¹⁷ 0 Спасибо) я так умничаю от делать нефиг, само меню пока не нужно их есть у меня) JoniDen 15 Октября 2016 19:58²¹ 0 Учишься работать с HTML и CSS? Angerfist 15 Октября 2016 20:07²⁵ 0 Не учусь, давно изучил, веб разметка это пустяки по сравнению с веб языками типа перл и пхп, изучаю до конца js, но никак не удаётся дочитать Современный учебник JavaScript ) Теория есть теория, пока применишь на практике мозг закипает к новой теме переходить))) JoniDen 15 Октября 2016 20:15²⁷ 0 Ну не знаю я сам C# и C++ выучу, и как выучу займусь JS ну или Java изучать. Kosten 15 Октября 2016 19:50¹⁸ 0 Да, здесь полностью согласен, по центру сразу установится по умлчанию, если авто прописано в стилях. Angerfist 15 Октября 2016 19:52¹⁹ 0 Это если relative, при position:absolute, auto бы здесь ничего не сделало) Kosten 15 Октября 2016 19:56²⁰ 0 Angerfist, привет, немного по умничай) и сможешь вывести код, чтоб он по умолчанию вставал, а не подгонять по длине. Angerfist 15 Октября 2016 20:01²² 0 Так он и так будет по умолчанию по центру с поправкой, длина всё равно зависит от кол-ва пунктов меню и длины самих надписей. Чётко всё настроить можно только с абсолютным позиционированием, как автор выложил. Kosten 15 Октября 2016 20:06²⁴ 0 Так это отлично. еще твоя методичка в помощь будет, вот что значит, нужно всегда читать комментарий. Советник 15 Октября 2016 20:03²³ 0 Его не только на фикстрованную ширину иожно ставить и на полноценный сайт.
1 2 »