Суббота, 12.07.2025, 19:47


Меню сайта
RSS ленты
Разделы новостей
Фильмы [2672]
Музыка [57]
Игры [36]
Другие программы [441]
Скрипты для Ucoz [378]
Шаблоны для Ucoz [124]
Полезные статьи [1394]
Все для Photoshop [97]
Программы для раскрутки [10]
Вебмастеру [67]
Графика [154]
Иконки групп для форума [6]
Новое на форуме
    Материалы
    Наш опрос
    Оцените дизайн?
    Всего ответов: 545
    Рекламко
    Материалы




    Вертикальное меню css

    Жаловаться на материал | Ссылки на материал 16.11.2009, 22:30


    Установка:

    Управление сайтом--Управление дизайном--Таблица стилей (CSS)

    и в самом низу прописываем данные код.

    Code
    /*  
    =============================================================  
    © 2009 Warez every day  
    http://2all4you.ru  
    =============================================================  
    */  

    ul#menu {  
      margin: 0px; /* Отступ для кнопок */  
      list-style-type : none;  
      font-size: 10px; /* Размер шрифта в кнопках */  
    }  

    ul#menu li {  
      margin-bottom: 3px; /* Отступ между кнопками */  
    }  

    ul#menu a {  
      position: relative;  
      width: 130px; /* Ширина кнопки */  
      height: 2em; /* Высота кнопки */  
      display: block; /* Отображение кнопок (НЕ МЕНЯТЬ) */  
      padding: 3px; /* Отступ для текста в кнопках */  
      padding-right: 0; /* Правый отступ для кнопок */  
      border: 1px solid #002948; /* Задание границы кнопки */  
      background-color: #c4e5ff; /* Задание фона кнопки */  
      color: #000; /* Цвет шрифта в кнопках */  
      text-decoration: none; /* Отмена подчёркивания ссылок */  
      font-weight: bold; /* Полужирный шрифт */  
      cursor: pointer; /* Задание типа курсора */  
    }  

    ul#menu a span {  
      position: absolute; /* Задание позиции подсказок (НЕ МЕНЯТЬ) */  
      top: -10000px; /* Задание позиции подсказок (НЕ МЕНЯТЬ) */  
      left: -10000px;/* Задание позиции подсказок (НЕ МЕНЯТЬ) */  
      display: block; /* Отображение подсказок (НЕ МЕНЯТЬ) */  
      width: 100%; /* Длинна поля подсказок */  
      height: 2em; /* Задание высоты поля подсказок */  
      background-color: #c4e5ff; /* Задание фона поля подсказок */  
      border: 1px solid #002948; /* Задание границы поля подсказок */  
      border-left: 0; /* Отключение левой границы */  
      padding: 3px; /* Отступ для текста подсказки */  
      padding-left: 20px; /* Отступ для текста подсказки */  
      cursor: pointer; /* Задание типа курсора */  
      color: #333; /* Цвет шрифта в подсказках */  
    }  

    ul#menu a:hover, ul#cmd a:focus, ul#cmd a:active {  
      background: #c4e5ff; /* Задание фона подсказки */  
    }  

    ul#menu a:hover span, ul#cmd a:focus span, ul#cmd a:active span {  
      top : -1px; /* Задание поля подсказки (НЕ МЕНЯТЬ) */  
      left : 80px; /* Задание поля подсказки (НЕ МЕНЯТЬ) */  
    }  

    /* ====== Copyright by http://2all4you.ru ====== */

    Далее

    В нужном месте вставляем наше будущие меню с пояснениями
    Тут нужно редактировать под себя:

    Code
    <ul id="menu">  
      <li><a href="Ссылка"><strong>Главная</strong>  
      <span>→ Главная страница сайта</span></a></li>  
    <li><a href="Ссылка"><strong>Форум</strong>  
      <span>→ Наш форум сайта</span></a></li>  
    <li><a href="#"><strong>Гостевая</strong>  
      <span>→ Оставить мнение о сайте</span></a></li>  
      <li><a href="#"><strong>Гостевая</strong>  
      <span>→ Оставить мнение о сайте</span></a></li>  
      <li><a href="#"><strong>Гостевая</strong>  
      <span>→ Оставить мнение о сайте</span></a></li>  
      <li><a href="#"><strong>Гостевая</strong>  
      <span>→ Оставить мнение о сайте</span></a></li>  
    </ul>






    Добавил: boma2008 | Категория: Скрипты для Ucoz | Просмотров: 1326
    Похожие материалы:
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]


    Форма входа
    Здравствуйте, Гость!

    Футбольные трансляции
    Поиск
    Друзья сайта

    Статистика
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    [ Кто on-line? ]
    [ Кто нас сегодня посетил ]
    Интересное в сети
    Материалы
    Sape

    Дизайн от Flynt © 2009-2010 | sitemap | sitemap-forum | Хостинг от uCoz
    Все материалы представлены в ознакомительных целях,и каждый материал принадлежит законному обладателю!Если какой-либо материал ущемляет Ваши права, то воспользуйтесь формой обратной связи 
    Проверить тиц и PR