ГЛАВНАЯ СТРАНИЦА | ВХОД
Свой блог я хочу посвятить таким же новичкам в сети, каким являюсь и я.
Здесь я буду делиться с вами всем тем, чему я научился за время существования моего блога.
И пусть опытные Веб-мастера не удивляются банальности моих тем, ведь я еще сам "чайник", поэтому и делиться советами буду прежде всего с такими же новичками, как и я.
Надеюсь, что мои советы кому-то помогут.
С уважением, Алексей

Горизонтальное меню на сайте 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% - ширина меню,

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

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



___________________________________________________________

Для владельцев собственного сервера или коммутатора msm.ru предлагает услуги colocation по размещению серверного оборудования на удаленной площадке. С условиями и тарифами можно ознакомиться на di-net.ru


Истинно верующим рекомендую bogoblog.ru, где вы бесплатно и без регистрации можете скачать христианские фильмы и книги, а также послушать проповеди и христианские передачи.

А для людей, заботящихся о своем внешнем виде, рекомендую студию красоты «Le Gotar», основными услугами которой являются наращивание ресниц, ногтей, волос, моделирование фигуры LPG, шугаринг, временное тату и др. Создайте свой стиль вместе с «Le Gotar»!
___________________________________________________________



С этой темой еще читают:

11 комментариев:

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

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

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

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

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

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

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

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

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

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

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

    ОтветитьУдалить

В комментариях оставляем мнения и советы к данной статье. Все вопросы задаем ТОЛЬКО на ФОРУМЕ. Отвечаю и стараюсь помочь всем!