Горизонтальное меню на сайте ucoz

Если у вас есть ucoz-овский сайт, то вы знаете о том, что горизонтальное меню порой просто необходимо. Сегодня я вам расскажу о том, как можно сделать самое простенькое горизонтальное меню.

Для начала включите в админ-панели сайта конструктор сайта. После чего под самой шапкой вы увидите маленькую стрелочку, при нажатии на которую у вас появятся две кнопки визуального редактора и редактора HTML. Вам нужно открыть редактор HTML и после HTML – кода шапки вставить следующие строки:

<style>
div#menunav {
float: center;
border-top: 1px solid #FFCC99;
border-bottom: 1px solid #FFCC99;
font-size: 16px;
background-color: #FFCC99;
padding: 0 0 0 25px;
margin: 5px 0;
}
div#menunav ul {
margin: 0px;
padding: 0px;
}
* html div#menunav ul {
float: left;
border-left: 1px solid #000000;
margin-left: 15px;
}
* html div#menunav a {
display: block;
}
div#menunav li {
float: left;
list-style-type: none;
background-color: #FFCC99;
border-right: 1px solid #FFCC99;
}
div#menunav li:first-child {
border-left: 1px solid #CCCCCC;
}
div#menunav a {
text-decoration: none;
padding: 0px 10px;
color: #660000;
}
div#menunav a:hover {
color: #ffffff;
}
div#menunav li:hover {
background-color: #660000;
}
/*powered by ……….ucoz.ru */
</style>

<div id="menunav" style="width: 50%;">
<ul>

<li><a href="http://…..ucoz.ru/index/0-6"><b>НОВОСТИ САЙТА!!!</b></a></li>
<li><a href="http://…..ucoz.ru/forum"><b>ФОРУМ</b></a></li>
</ul>
</div>

где:

border-top – граница сверху,
border-bottom – граница снизу,
font-size – размер шрифта,
background-color – заливка,
padding – отступ,
border-left – левая граница,
list-style-type – маркеры,
text-decoration – подчеркивание ссылок,
….ucoz.ru – адрес сайта без http://www.
width: 100% – ширина меню,

В последней части замените адреса страниц меню и их название на свои.

В итоге вы получите следующее:

 

div#menunav {float: center;border-top: 1px solid #FFCC99;border-bottom: 1px solid #FFCC99;font-size: 16px;background-color: #FFCC99;padding: 0 0 0 25px;margin: 5px 0;}div#menunav ul {margin: 0px;padding: 0px;}* html div#menunav ul {float: left;border-left: 1px solid #000000;margin-left: 15px;}* html div#menunav a {display: block;}div#menunav li {float: left;list-style-type: none;background-color: #FFCC99;border-right: 1px solid #FFCC99;}div#menunav li:first-child {border-left: 1px solid #CCCCCC;}div#menunav a {text-decoration: none;padding: 0px 10px;color: #660000;}div#menunav a:hover {color: #ffffff;}div#menunav li:hover {background-color: #660000;}/*powered by pohudey-ka.ucoz.ru*/

This entry was posted on Вторник, Ноябрь 3rd, 2009 at 2:42 пп and is filed under uCoz. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 Responses to “Горизонтальное меню на сайте ucoz”

  1. Игорь:

    Не всегда есть потребность в создании верхнего меню, ucoz сам по себе достаточен для полноценного функционирования, чтобы дополнительно вмешиваться в его коды, тем не менее – урок очень полезный, так как эта статья – готовая формула для создания горизонтального меню.

  2. Алексей:

    Я, наверное полный чайник! Но пр установки этого кода, всё равно меню получаеться вертикальным!

  3. Алексей:

    Такого быть не может. На сайте долгое время было такое меню. Да и скрин прилагается

  4. Алексей:

    Попробуйте взять код из горизонтального меню для блоггера, он тоже должен работать

  5. Олег:

    В принципе получилось сразу. Детализации маловато, но это, по всей видимости, связано с моим посредственным знанием html.Автору спасибо.

  6. Алексей:

    Pantera, как бы вы не регистрировались, но меня ваша виагра уже достала! Коммент удаляю!

  7. Алексей:

    Pantera, ваши комментарии уже вызывают глупую улыбку ;) )) Вы не понимаете, что не нужно спамить в моем блоге?Если вам так нужна ссылка на вашу виагру,то делайте ее неактивной. В противном случае, даже "самый ваш умный коммент" я буду удалять.Меня просто интересует,почему мои блоги? Чем они вам так понравились? ;)

  8. golag:

    Почему меню всё равно получается вертикальным ???

  9. Алексей:

    Специально для вас просто скопировал код и вставил еще раз под постовыми. Получается горизонтальное меню. Только нужно везде убрать в конце тег br. Возможно причина в нем.

  10. Алексей:

    Попробуйте еще раз.br убрал, там еще один stile лишний был. Извиняюсь.

  11. Sergei:

    Автору респект! Но плз помоги я не пойму почему у меня меню не по центру а слева?

  12. MDOY:

    Подскажите как сделать чтобы горизонтальное меню было в одну строку…а то я вставила данные и у меня меню в две строки получилось…размер шрифта тоже меняла

  13. Сергей:

    Всем здравствуйте!!Хочу сказать большое спасибо за такое красивое меню я долго искал шаблон с меню по центру и что бы оно было горизонтальным сюда я попал случайно и урааа я нашёл то что нужно было, сам я в HTML и CSS дуб то мне нужен был понятный исходник и уже после того как я сам разобрался что к чему то у меня получилось вот такое меню http://legionsib.clan.su/ приходите посмотреть

  14. sven:

    Алексей раскажите пожалуйста как сделать вверху меню чтоб при нажатии работало, а то вставил код ниче неработает

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