CSS Выпадающее меню

11.11.2017

Выпадающее меню на CSS, делалось для джумлы, но использовать можно отдельно.

CSS общий:

Внимание:Ширину/Высоту нужно указывать у A, если задать у LI, то блок меню будет кликабельным частично.

 
#top_menu
{
	height: 51px;
	width: 1200px;
}

#top_menu li
{
	float: left;
	width: 195px;
	height: 51px;
/*	white-space: nowrap;*/
	text-align: center;
	border-right: #e1b92d solid 1px;
	border-left: #e1b92d solid 1px;
	z-index: 5;
	transition: .3s;
}

#top_menu a
{
/*	color: #000;
    padding: 0;
    text-decoration: none;
    position: relative;
    top: 15px;
    width: auto;
    display: block;
    text-transform: uppercase;
    display: block;*/

	color: #000;
	padding: 16px;
	text-decoration: none;
	position: relative;
	width: auto;
	display: block;
	text-transform: uppercase;
	display: block;
	height: 100%;
	width: 100%;
}

#top_menu li.active > a,
#top_menu li.current > a
{
/*	text-decoration: underline;*/
	background-color: #fcda3b;
}

#top_menu li:hover,
#top_menu a:hover
{
/*    text-decoration: underline;*/
    background-color: #fcda3b;
}

#top_menu li ul
{
    display: none;
}

#top_menu li:hover ul
{
    display: block;
}

#top_menu li:hover ul
{
    display: block;
}

#top_menu li ul
{
    background-color: #fcda3b;
    width: 160px;
/*    margin-top: 29px;*/
    padding: 0;
    margin-left: -1px;
}

#top_menu li ul li
{
    background-color: #fcda3b;
    list-style: none;
    float: none;
/*    text-align: left;*/
    text-decoration: none;
    border: 1px solid #fcda3b;
    border-top: #e1b92d solid 1px;
    border-bottom: #e1b92d solid 1px;
    transition: .3s;
}

#top_menu li ul li:hover,
#top_menu li ul li:hover a
{
    background-color: #fbc328;
}

#top_menu li ul li.current a
{
    background-color: #fbc328;
}

HTML для джумлы:

 
<div class="wrap_top_menu">
	<div id="top_menu" class="container">
		<div class="row">
			<jdoc:include type="modules" name="top_menu" style="none" />
		</div>
	</div>
</div>

HTML "чистый":

 
<div id="top_menu" class="container">
    <div class="row">
        <ul class="nav menu">
            <li class="item-107 deeper parent"><a href="/o-kompanii">О компании</a>
                <ul class="nav-child unstyled small">
                    <li class="item-113"><a href="/o-kompanii">Наша презентация</a>
                    </li>
                    <li class="item-114"><a href="/o-kompanii/otvetstvennost">Ответственность</a>
                    </li>
                    <li class="item-115"><a href="/o-kompanii/vakansii">Вакансии</a>
                    </li>
                    <li class="item-116"><a href="/o-kompanii/stat-nashim-partnerom">Стать нашим партнером</a>
                    </li>
                </ul>
            </li>
            <li class="item-108 deeper parent"><a href="/uslugi">Услуги</a>
                <ul class="nav-child unstyled small">
                    <li class="item-117"><a href="/uslugi/ekspress">Экспресс</a>
                    </li>
                    <li class="item-118"><a href="/uslugi/ekonom">Эконом</a>
                    </li>
                    <li class="item-119"><a href="/uslugi/full-truck">Full truck</a>
                    </li>
                    <li class="item-120"><a href="/uslugi/skladskaya-obrabotka">Складская обработка</a>
                    </li>
                    <li class="item-121"><a href="/uslugi/mezhdunarodnye-perevozki">Международные перевозки</a>
                    </li>
                    <li class="item-122"><a href="/uslugi/ofisnye-i-kvartirnye-pereezdy">Офисные и квартирные переезды</a>
                    </li>
                </ul>
            </li>
            <li class="item-109 deeper parent"><a href="/informatsiya">Информация</a>
                <ul class="nav-child unstyled small">
                    <li class="item-123"><a href="/informatsiya/reglament-predostavleniya-uslug">Регламент предоставления услуг</a>
                    </li>
                    <li class="item-124"><a href="/informatsiya/tipovoj-dogovor">Типовой договор</a>
                    </li>
                    <li class="item-125"><a href="/informatsiya/bankovskie-rekvizity">Банковские реквизиты</a>
                    </li>
                    <li class="item-126"><a href="/informatsiya/upakovka">Упаковка</a>
                    </li>
                    <li class="item-127"><a href="/informatsiya/oformlenie-nakladnoj">Оформление накладной</a>
                    </li>
                </ul>
            </li>
            <li class="item-110 deeper parent"><a href="/press-tsentr">Пресс-центр</a>
                <ul class="nav-child unstyled small">
                    <li class="item-128"><a href="/press-tsentr">Что нового</a>
                    </li>
                    <li class="item-129"><a href="/press-tsentr/kontakty-dlya-pressy">Контакты для прессы</a>
                    </li>
                </ul>
            </li>
            <li class="item-111"><a href="/filialy">Филиалы</a>
            </li>
            <li class="item-112 current active"><a href="/kontakty">Контакты</a>
            </li>
        </ul>

    </div>
</div>


Категории: HTML, CSS, CMS Joomla 3.X, Joomla
Пометки: dropdown menu
Яндекс.Метрика