Мега меню с выскальзывающими панелями на CSS3

Мегаменю на CSS3 - выскальзывающие панели со списками ссылок. Для анимации используются трансформации, которые работают только в новейших браузерах Firefox, Chrome, Safary, IE9, Opera10. Меню будет работать и в старых браузерах но без анимации.

 

Разметка HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
    <title>Выскальзываюшее меню CSS3 | Материалы сайта RUSELLER.COM</title>
	<meta charset="utf-8">
</head>
<body>
<div class="example">
	<ul class="menu">
        <!-- Верхние элементы -->
		<li class="main"><a target="_blank" href="http://www.ruseller.com/">Главная</a></li>
		<li class="main" id="has-sub1"><a target="_blank" href="http://www.ruseller.com/">Уроки</a></li>
		<li class="main" id="has-sub2"><a target="_blank" href="http://www.ruseller.com/">Ресурсы</a></li>
		<li class="main" id="has-sub3"><a target="_blank" href="#">Меню #4</a></li>
		<li class="main" id="has-sub4"><a target="_blank" href="#">Меню #5</a></li>
		<li class="main"><a target="_blank" href="http://www.ruseller.com/">О нас</a></li>
		<li class="main"><a target="_blank" href="http://www.ruseller.com/">Назад</a></li>

        <!-- Подэлементы -->
        <li class="sub" id="sub1">
            <table><tr>
                <td>
    				<dl>
    					<dt>Ссылки #1</dt>
                        <dd><a target="_blank" href="http://www.ruseller.com/">HTML / CSS</a></dd>
                        <dd><a target="_blank" href="http://www.ruseller.com/">JS / jQuery</a></dd>
                        <dd><a target="_blank" href="http://www.ruseller.com/">PHP</a></dd>
                        <dd><a target="_blank" href="http://www.ruseller.com/">MySQL</a></dd>
    					<dt>Ссылки #2</dt>
                        <dd><a target="_blank" href="http://www.ruseller.com/">XSLT</a></dd>
                        <dd><a target="_blank" href="http://www.ruseller.com/">Ajax</a></dd>
                        <dd><a target="_blank" href="http://www.ruseller.com/">HTML / CSS</a></dd>
    				</dl>
                </td>
                <td>
    				<dl>
    					<dt>Ссылки #3</dt>
    					<dd><a target="_blank" href="#">Ссылка 31</a></dd>
    					<dd><a target="_blank" href="#">Ссылка 32</a></dd>
    					<dd><a target="_blank" href="#">Ссылка 33</a></dd>
    					<dd><a target="_blank" href="#">Ссылка 34</a></dd>
    					<dd><a target="_blank" href="#">Ссылка 35</a></dd>
    					<dd><a target="_blank" href="#">Ссылка 36</a></dd>
    					<dd><a target="_blank" href="#">Ссылка 37</a></dd>
    					<dd><a target="_blank" href="#">Ссылка 38</a></dd>
    				</dl>
                </td>
                <td>
    				<dl>
    					<dt>Ссылки #4</dt>
    					<dd><a target="_blank" href="#">Ссылка 41</a></dd>
    					<dd><a target="_blank" href="#">Ссылка 42</a></dd>
    					<dt>Ссылки #5</dt>
    					<dd><a target="_blank" href="#">Ссылка 51</a></dd>
    					<dd><a target="_blank" href="#">Ссылка 52</a></dd>
    					<dt>Ссылки #6</dt>
    					<dd><a target="_blank" href="#">Ссылка 61</a></dd>
    					<dd><a target="_blank" href="#">Ссылка 62</a></dd>
    				</dl>
                </td>
            </tr></table>
        </li>

	. . .

        </li>
	</ul>

    <div style="clear:both"></div>
</div>
</body>
</html>

 

CSS

.menu {
    font-family:Verdana, sans-serif;
    list-style:none;
    margin:0;
    min-height:35px;
    padding:0;
    position:relative;
    width:100%
}
.menu li.main {
    float:left;
    padding-right:1px
}
.menu li.main a {
    background-color:#000;
    color:#fff;
    display:block;
    font-size:13px;
    font-weight:700;
    height:35px;
    line-height:35px;
    padding:0 25px;
    text-decoration:none
}
.menu li.sub {
    background-color:#444;
    border:0;
    clear:both;
    float:left;
    height:0;
    overflow:hidden;
    position:relative;
    width:100%;

    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;

    -moz-transition: height 0.5s ease-in-out;
    -ms-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    -webkit-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;

    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
.menu li.sub table {
    width:100%
}
.menu li.sub dl {
    background-color:#fff;
    height:195px;
    margin:5px 5px 0 0;
    padding:10px;

    -moz-border-radius:8px;
    border-radius:8px
}
.menu li.sub dt {
    border:1px solid #000;
    color:#000;
    font-size:14px;
    font-weight:700;
    line-height:18px;
    margin:1px 0;
    padding:0 10px;

    border-radius:5px;
    -moz-border-radius:5px
}
.menu li.sub dt:hover {
    background-color:#ccc
}
.menu li.sub dd {
    margin:0;
    padding:0
}
.menu li.sub dd a {
    color:#666;
    display:block;
    font-size:12px;
    line-height:20px;
    padding-left:30px;
    text-decoration:none;

    -moz-border-radius:5px;
    border-radius:5px
}
.menu li.sub dd a:hover {
    background-color:#ccc;
    color:#444
}
.menu li#has-sub1:hover ~ li#sub1,
.menu li#has-sub2:hover ~ li#sub2,
.menu li#has-sub3:hover ~ li#sub3,
.menu li#has-sub4:hover ~ li#sub4 {
    height:240px;

    -moz-transition: height 0.5s ease-in-out 0.2s
    -ms-transition: height 0.5s ease-in-out 0.2s
    -o-transition: height 0.5s ease-in-out 0.2s
    -webkit-transition: height 0.5s ease-in-out 0.2s
    transition: height 0.5s ease-in-out 0.2s
}
li#sub1:hover,
li#sub2:hover,
li#sub3:hover,
li#sub4:hover {
    height:240px;

    -moz-transition: height 0.5s ease-in-out 0.2s
    -ms-transition: height 0.5s ease-in-out 0.2s
    -o-transition: height 0.5s ease-in-out 0.25
    -webkit-transition: height 0.5s ease-in-out 0.2s
    transition: height 0.5s ease-in-out 0.2s
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/9ADgHlKjh8c/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Мега меню с выскальзывающими панелями на CSS3 | | 2012-06-19 11:57:46 | | Статьи Web-мастеру | | Мегаменю на CSS3 - выскальзывающие панели со списками ссылок. Для анимации используются трансформации, которые работают только в новейших браузерах Firefox, Chrome, Safary, IE9, Opera10. Меню будет | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: