Создал меню на css, но проблема в том, что выпадающее меню должно быть не прямо под пунктом меню, на которое навели курсор, а должно занимать всю ширину контейнера под пунктом меню, как на рисунке.
Подскажите, как это правильно реализовать на css?
Верхнее меню смещено вправо, слева ещё может быть логотип, т.е. напротив item1,item2,item3.
и чтобы было адаптивное выпадающее меню, т.е. при уменьшении разрешения выпадающее меню также занимало всю ширину.
и ещё нужны треугольники, как на рисунке при наведении на пункт меню.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header{
width: 100%;
border: 1px solid gray;
padding: 20px;
}
.wrapper{
width: 80%;
margin: 0 auto;
}
.
wrapper:after{
content: '';
display: block;
clear: both;
overflow: hidden;
}
nav{
width: 50%;
float: right;
clear: both;
}
.item{
float: left;
margin-right: 30px;
}
.dropdown{
display: none;
}
.drop:hover + .dropdown{
display: block;
position: absolute;
width: 100%;
background: green;
border: 1px solid gray;
}
</style>
</head>
<body>
<header>
<div>
<nav>
<ul>
<li>
<a href="#">item1</a>
<ul>
<li><p>item</p></li>
<li><p>item</p></li>
<li><p>item</p></li>
</ul>
</li>
<li>
<a href="#">item2</a>
<ul>
<li><p>item</p></li>
<li><p>item</p></li>
<li><p>item</p></li>
</ul>
</li>
<li>
<a href="#">item3</a>
<ul>
<li><p>item</p></li>
<li><p>item</p></li>
<li><p>item</p></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html> 
Выпадающее меню попадает под текст контента — Вопрос от олег #2
- Вопросы
- Горячие
- Пользователи
- Вход/Регистрация
>
Категории вопросов
Задать вопрос +
Основное
- Вопросы новичков (16478)
- Платные услуги (2119)
- Вопросы по uKit (81)
Контент-модули
- Интернет-магазин (1432)
- Редактор страниц (236)
- Каталоги (805)
- Блог (дневник) (111)
- Объявления (295)
- Фотоальбомы (433)
- Видео (255)
- Тесты (60)
- Форум (576)
Продвижение сайта
- Монетизация сайта (219)
- Раскрутка сайта (2452)
Управление сайтом
- Работа с аккаунтом (5312)
- Поиск по сайту (426)
- Меню сайта (1765)
- Домен для сайта (1531)
- Дизайн сайта (13465)
- Безопасность сайта (1476)
функции (1307)Доп. модули
- SEO-модуль (225)
- Опросы (63)
- Гостевая книга (99)
- Пользователи (431)
- Почтовые формы (318)
- Статистика сайта (197)
- Соц.
- Мини-чат (91)
Вебмастеру
- JavaScript и пр. (644)
- PHP и API на uCoz (235)
- SMS сервисы (10)
- Вопросы по Narod. ru (427)
- Софт для вебмастера (39)
ru (427)…
Учебники по шаблонам Joomla — Параметры меню
Параметры меню шаблонов Joomla
Большинство шаблонов имеют различные типы меню, из которых вы можете выбирать. Они более продвинуты и сложны, чем Joomla! модуль меню. Некоторые из них основаны на javascript, но большинство представляют собой комбинацию javascript, php, html и css. Ниже приведен список типов меню, используемых RocketTheme и другими разработчиками шаблонов:
- RokMooMenu — вертикальное выпадающее меню с эффектами перехода на основе javascript
- Suckerfish — стандартное вертикальное выпадающее меню без эффектов перехода
- Supersucker — горизонтальное выпадающее меню без эффектов перехода
- Transmenu — вертикальное выпадающее меню, полностью основанное на JavaScript
- Slide Menu — горизонтальное/вертикальное меню с волнообразными переходами
- Splitmenu — стандартная, но универсальная система меню подменю
Выбор меню
В большинстве случаев вы выбираете, какой тип меню вы хотите использовать на своем сайте, в файле index.
php шаблона. Иногда у вас может быть файл в корне шаблона с именем templateConfig.inc.php, который будет использоваться вместо него.
Ниже приведен фрагмент файла index.php Replicant
$menu_type = "moomenu"; // Мумену | раздельное меню | модуль
$menu_type — это префикс, который используется RocketTheme в его конфигурации, который обозначает тип системы меню, но может отличаться от других разработчиков шаблонов, однако он должен иметь похожее имя. Имя между тегами «»например, «moomenu» определяется описаниями справа от него, в данном случае это // moomenu | раздельное меню | модуль . Структура должна быть одинаковой во всех параметрах конфигурации для типа меню, только с немного разными именами.
Еще одна настройка, которую вы найдете, это возможность выбирать, какой Joomla! меню загружается во встроенной структуре меню. Например, вы можете создать меню с именем moomenu , которое назначено RokMooMenu.
Обычно это видно во фрагменте ниже
$menu_name = "mainmenu"; // mainmenu по умолчанию, может быть любым названием меню Joomla
$menu_name — это префикс, который используется RocketTheme в его конфигурации, который означает, какое имя меню используется, но может отличаться от других разработчиков шаблонов, однако оно должно иметь похожее имя. Имя между «»тегами, например, , «mainmeu» , определяется описанием справа от него, которое в данном случае // mainmenu по умолчанию, может быть любым именем меню Joomla . Структура должна быть одинаковой во всех параметрах конфигурации имени меню, только с немного разными именами.
Использование раскрывающихся списков меню
Назначение родительских элементов для создания раскрывающихся списков
Чтобы определенные элементы меню отображались в качестве подэлементов, вы должны назначить их определенному элементу навигации, из которого они будут исходить. Следующий урок покажет вам, как просто создать идеальную систему меню.
- Переход в область меню
После входа в Joomla! Область администрирования, вы должны перейти в область меню. Наведите указатель мыши на элемент меню на панели задач, чтобы отобразить раскрывающееся меню. В этом примере мы заходим в главное меню, но метод одинаков для всех меню в административной области. - Диспетчер меню
Затем вы попадете в диспетчер меню для главного меню. На этом этапе вы можете сделать 2 вещи. Первый — отредактировать существующий пункт меню, что мы и будем делать в этом руководстве, или создать новый пункт меню, который будет подчинен существующему пункту. Нажмите на элемент, который вы хотите сделать частью выпадающего меню. - Назначение родительского элемента
Теперь, когда вы находитесь в редакторе отдельного элемента содержимого, вы можете назначить его элементу главного меню, в котором вы хотите разместить раскрывающееся меню с нужным элементом. Определите раздел «Родительский элемент» менеджера. Вы выберете элемент, в котором вы хотите быть родителем и источником выпадающего меню. В этом примере мы выбрали «Дом».
Вы выберете элемент, в котором вы хотите быть родителем и источником выпадающего меню. В этом примере мы выбрали «Дом».| <голова> | |
| <метакодировка="UTF-8" /> | |
| <тело> | |
Адаптивное меню CSS3 с раскрывающимся списком (горизонтальное и вертикальное) | |
| <ул> | |
| <дел> | |
| <ул> | |
| <ул> | |
