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

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2009 » Октябрь » 20 » Красивое меню на CSS
    23:31
    Красивое меню на CSS
    Пример

    В CSS вставляем:

    Code
    #modernbricksmenu{
         padding: 0px;
         width: 100%;
         background: transparent;
         voice-family: ""}"";
         voice-family: inherit;
    }
    #modernbricksmenu ul{
         font: bold 11px Arial;
         margin: 0px;
         margin-left: 40px;
         padding: 0px;
         list-style: none;
    }
    #modernbricksmenu li{
         display: inline;
         margin: 0 2px 0 0;
         padding: 0px;
         text-transform: uppercase;
    }
    #modernbricksmenu a{
         float: left;
         display: block;
         color: white;
         margin: 0 1px 0 0;
         padding: 5px 10px;
         text-decoration: none;
         letter-spacing: 1px;
         background-color: black;
         border-bottom: 1px solid white;
    }
    #modernbricksmenu a:hover{
         background-color: gray;
    }
    #modernbricksmenu #current a{
         background-color: #D25A0B;
         border-color: #D25A0B;
    }
    #modernbricksmenuline{
         clear: both;
         padding: 0px;
         width: 100%;
         height: 5px;
         line-height: 5px;
         background: #D25A0B;
    }
    #myform{
         float: right;
         margin: 0px;
         padding: 0px;
    }
    #myform .textinput{
         width: 190px;
         border: 1px solid gray;
    }
    #myform .submit{
         font: bold 11px Verdana;
         height: 22px;
         background-color: lightyellow;
    }

    И где нужно выводить, вставляем:

    Code
    <div id="modernbricksmenu">
        <ul>
         <li style="margin-left: 1px"><a href="http://www.jongol.ru" title="Домой">Домой</a></li>
         <li><a href="http://www.jongol.ru/php/" title="PHP">PHP</a></li>
         <li><a href="http://www.jongol.ru/javacript/" title="JavaScript">JavaScript</a></li>
         <li id="current"><a href="http://www.jongol.ru/css/" title="CSS">CSS</a></li>
         <li><a href="http://www.jongol.ru/contact/" title="Контакты">Контакты</a></li>
        </ul>
        <form id="myform">
         <input type="text" class="textinput" /> <input class="submit" type="submit" value="Поиск" />
        </form>
    </div>
    <div id="modernbricksmenuline"></div>
    Категория: скрипты для ucoz сайта | Просмотров: 363 | Добавил: dirtymusicx | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]