Меню в стиле Metro
В удобное вам место ставим данный код: [HTML]<div class="metro-web-deva"> <a class="case" href="#" style="height: 174px;"> <span>Главная</span> <img class="label" src="images/Windows-Metro.png" /> </a> <a class="case" href="#" style="background: #fd9f13;"> <span>RSS</span> <img class="label" src="images/Rss-Feed-Metro.png" alt="" /> </a> <a class="case" href="#" style="width:314px;height: 80px; background: #4F4F4F;"> <span>Автор</span> <img class="large" src="images/web-deva1.png" /> </a> <a class="case" href="#" style="background: #c8312b;"> <span>YouTube</span> <img class="label" src="images/Youtube-Red-Metro.png" alt="" /> </a> <a class="case" href="#"> <span>Музыка</span> <img class="label" src="images/Music-Folder-Metro.png" /> </a> <a class="case" href="#" style="background: #19bfe5;"> <span>Twitter</span> <img class="label" src="images/Twitter-Bird-Metro.png" alt="" /> </a> <a class="case" href="#" style="background: #d64136;"> <span>Google+</span> <img class="label" src="images/Google-Metro.png" alt="" /> </a> <a class="case" href="#" style="background: #8b0189;"> <span>Видео</span> <img class="label" src="images/Videos-Folder-Metro.png" /> </a> <a class="case" href="#" style="background: #8b0189;"> <span>Видео</span> <img class="label" src="images/Videos-Folder-Metro.png" /> </a> <a class="case" href="#" style="background: #8b0189;"> <span>Видео</span> <img class="label" src="images/Videos-Folder-Metro.png" /> </a> </div>[/HTML] Главное не забываем стили, что-бы меню выглядело так как мы хотим: [CSS].metro-web-deva { width:680px; } .metro-web-deva .case { float: left; position: relative; margin: 4px; padding: 3px; width: 150px; height: 80px; text-decoration: none; cursor: pointer; overflow: hidden; color: #fff; z-index: 9; Background:#04aeda; transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } .metro-web-deva .case:hover { opacity: 0.8; filter: alpha(opacity=80); } .metro-web-deva .case span { position: absolute; left: 5px; bottom: 5px; font-size: 13px; z-index: 8; } .metro-web-deva .case img.label { position: absolute; left: 50%; top: 50%; margin-left: -32px; margin-top: -32px; z-index: 7; } .metro-web-deva .case img.large { margin-left: 20px; margin-top: 5px; }[/CSS] Вот и всё. Кроме HTML и CSS ничего не используется.
|
Категория: 
Опубликовал: 
Используемый код:
Web-сайт автора: 
Автор: |
СКАЧАТЬ
Размер файла: 99.2 Kb
Посмотреть |
Комменты
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
[ Регистрация ]
