1. Вы находитесь в архивной версии форума xaker.name. Здесь собраны темы с 2007 по 2012 год, большинство инструкций и мануалов уже неактуальны.

Полезные вес4и

  1. В данной теме, выкладываем полезные материалы по Html/CSS/Jquery
    Примерное содержание:
    1. Название
    2. Демо|Скачать (если демо не имеется, то изображение финального результата).
    3. Полное описание (с Изображениями).

    Внимание!
    Сообщения такие, как "О спасибо, классно, познавательно и т.д.) будут удаляться ! а автору будут выставлен (-) в репу!

    CSS3 выпадающее меню


    В сегодняшнем небольшом уроке мы создадим меню в стиле MAC с помощью новых свойств CSS3.




    Это меню будет мультиуровневым и при создании его были использованы следующие свойства CSS3 - border-radius, box-shadow, и text-shadow.
    Данное меню прекрасно отображается в Firefox, Safari и Chrome. Также меню работает и в других браузерах, но без скругленных углов.


    Ниже представлена картинка, которая показывает разницу между браузерами:
    [​IMG]
    Одна картинка
    Одна бело-прозрачная картинка используется для достижения эффекта градиента. Поскольку новое CSS3 свойство градиента не поддерживается всеми браузерами, безопаснее использовать фоновое изображение.
    [​IMG]


    Интенсивность градиента можно изменить смещением фона вниз или вверх. Также, цвет градиента можно легко подстроить меняя фоновый цвет.
    [​IMG]
    CSS код
    Автор урока предпочел построчно не расписывать каждую строку кода. Все понятно по одной картинке:


    [​IMG]
    [​IMG]


    От себя добавлю структуру данного меню.

    Код:
    <ul id="nav">
    <li class="current"><a href="http://www.webdesignerwall.com">Home</a></li>
    <li><a href="http://www.ndesign-studio.com">My Projects</a>
    
    <ul>
    <li><a href="http://www.ndesign-studio.com">N.Design Studio</a>
    <ul>
    <li><a href="http://www.ndesign-studio.com/portfolio">Portfolio</a></li>
    <li><a href="http://www.ndesign-studio.com/wp-themes">WordPress Themes</a></li>
    <li><a href="http://www.ndesign-studio.com/wallpapers">Wallpapers</a></li>
    <li><a href="http://www.ndesign-studio.com/tutorials">Illustrator Tutorials</a></li>
    
    </ul>
    </li>
    <li><a href="http://www.webdesignerwall.com">Web Designer Wall</a>
    <ul>
    <li><a href="http://jobs.webdesignerwall.com">Design Job Wall</a></li>
    </ul>
    </li>
    <li><a href="http://icondock.com">IconDock</a></li>
    
    <li><a href="http://bestwebgallery.com">Best Web Gallery</a></li>
    </ul>
    </li>
    <li><a href="#">Multi-Levels</a>
    <ul>
    <li><a href="#">Team</a>
    <ul>
    
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a>
    <ul>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
    
    </ul>
    </li>
    
    <li><a href="#">Sub-Level Item</a></li>
    </ul>
    </li>
    <li><a href="#">Sales</a></li>
    <li><a href="#">Another Link</a></li>
    
    <li><a href="#">Department</a>
    <ul>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
    </ul>
    </li>
    
    </ul>
    </li> 
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    Оригинал: [webdesignerwall.com/tutorials/css3-dropdown-menu]