Четверг, 24.07.2025, 22:16
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    «  Май 2009  »
    Пн Вт Ср Чт Пт Сб Вс
        123
    45678910
    11121314151617
    18192021222324
    25262728293031
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2009 » Май » 8 » Красивое горизонтальное меню
    22:58
    Красивое горизонтальное меню

    1) Качаем архив (скачать можно ниже) и выбираем понравившеюся цверовую схему и загружаем в корень сайта.
    2) Вставляем между тегами <head></head> вот этот скрипт и вставляем там ссылки на картинки.

    Quote
    <style type="text/css">
    /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
    /*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

    .glossymenu{
    position: relative;
    padding: 0 0 0 34px;
    margin: 0 auto 0 auto;
    background: url(путь к картинке заднего фона) repeat-x; /*путь к картинке заднего фона*/
    height: 46px;
    list-style: none;
    }

    .glossymenu li{
    float:left;
    }

    .glossymenu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;
    }

    .glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Расстояние между элементами меню*/
    }

    .glossymenu li.current a, .glossymenu li a:hover{
    color: #fff;
    background: url(путь к левой картинке) no-repeat; /*путь к левой картинке*/
    background-position: left;
    }

    .glossymenu li.current a b, .glossymenu li a:hover b{
    color: #fff;
    background: url(путь к правой картинке) no-repeat right top; /*путь к правой картинке*/
    }</style>

    3) Теперь вставляем в нужное место само меню:

    Quote
    <ul class="glossymenu">
    <li class="current"><a href="http://Ссылка"><b>Название</b></a></li>
    <li><a href="http://Ссылка"><b>Название</b></a></li>
    <li><a href="http://Ссылка"><b>Название</b></a></li>
    <li><a href="http://Ссылка"><b>Название</b></a></li>
    <li><a href="http://Ссылка"><b>Название</b></a></li>
    <li><a href="http://Ссылка"><b>Название</b></a></li>
    </ul>
    Категория: скрипты для ucoz сайта | Просмотров: 1095 | Добавил: alexpetuhow | Рейтинг: 5.0/2
    Всего комментариев: 151 2 »
    15 warik093  
    0
    в каком разделе head и head

    14 WiN32  
    0
    Нагляделся этого меню уже

    13 WiN32  
    0
    А я каждый день на этом сайте))))))

    12 SaiN  
    0
    где написано /*Расстояние между элементами меню*/ туда надо че нибудь встовлять??? dry

    11 SaiN  
    0
    а цвет такой же да будет синий??? cool

    10 nekit12  
    0
    всё пааашиииииииттт!!!!!!!!!!!!!!!!автар я тебя люблю!!!!очень подходит!!!!!!!крутая тема!простые меню устарели!а ещё! можно тырить с других сайтов горизонтальное меню и вставлять себе!!!!!!круто! лови + и 2 награды! biggrin biggrin biggrin biggrin biggrin biggrin biggrin biggrin biggrin biggrin biggrin biggrin

    9 NoName74  
    0
    Знаете, ХЕАД не очень хочется забивать

    8 NoName74  
    0
    люди, помоему код, котрый пихать в ХЕАД проще засунуть в ЦСС, но его нужно чуть подкорректировать тогда

    7 диман907  
    0
    аподскажите куда первое всатвлять ( раздел)

    6 KAIN007  
    0
    КЛАССНО

    1-10 11-15
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]