Как сделать html меню: Как сделать горизонтальное меню в html

Содержание

html — Как сделать переход по ссылки при нажатии на пункт меню?

Вопрос задан 2 года 11 месяцев назад

Изменён 2 года 1 месяц назад

Просмотрен 1k раз

Делается сайт на платформе Tilda. Имеется стандартное меню с выпадающим второго уровня. Не приложу ума как сделать так, что бы при наведении на основной пункт меню открывалось меню второго уровня, а при нажатии — переходить на основную страницу раздела.

html
css
веб-сайт
tilda

Берем открываем документацию Тильды и видим два варианта решения

Вариант 1. Использование встроенных элементов

Под списком пунктов меню нажмите на кнопку «Добавить пункты второго уровня» — напротив пунктов меню появятся иконки в виде знака «+».

Нажмите на «+» для добавления пункта подменю Укажите название пункта и ссылку

Вариант 2. Использование блока ME601

Блок ME601 позволяет добавить подразделы к пунктам основного меню. Как это работает:

Добавьте на страницу блок ME601 В блоке МЕ601 пропишите ссылку вида #submenu:more В основном меню в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more. Примечание: «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus

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

Сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Горизонтальное резиновое меню на всю ширино (justify)

24.01.2019

7325

В закладки

В отличии предыдущего меню, где есть отступы у каждого элемента, часто возникает задача сделать резиновое меню без них. Пункты меню должно идти с одинаковыми интервалами и без отступов по бокам.

Сделать его можно с помощью text-align: justify и псевдо-свойств :before и :after.

<div>
	<div>
		<ul>
			<li><a href="#">Каталог</a></li>
			<li><a href="#">Акции</a></li>
			<li><a href="#">Отзывы</a></li>
			<li><a href="#">Контакты</a></li>
		</ul>
	</div>
</div>

HTML

.wrp {	
	width: 600px;
	margin: 0 auto
}
.  menu {
	background: #b92525;
	padding: 20px 0 0 0;
	height: 40px;
}
.menu ul {	
	text-align: justify;
	margin: 0;
	padding: 0;  
}
.menu ul:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.menu ul:after {
	content: '';
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	display: inline-block;
}
.menu li {	
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu a {
	font-size: 16px;
	color: #fff;
}

CSS

Добавление разделителей между пунктами меню.

<div>
	<div>
		<ul>
			<li><a href="#">Каталог</a></li>
			<li><span></span></li>
			<li><a href="#">Акции</a></li>
			<li><span></span></li>
			<li><a href="#">Отзывы</a></li>
			<li><span></span></li>
			<li><a href="#">Контакты</a></li>
		</ul>
	</div>
</div>

HTML

. wrp {	
	width: 600px;
	margin: 0 auto
}
.menu {
	background: #b92525;
	padding: 20px 0 0 0;
	height: 40px;
}
.menu ul {	
	text-align: justify;
	margin: 0;
	padding: 0;  
}
.menu ul:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.menu ul:after {
	content: '';
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	display: inline-block;
}
.menu li {	
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu a {
	font-size: 16px;
	color: #fff;
}
.menu span {			
	display: inline-block;
	width: 8px;
	height: 8px;
	background: url(/img/menu-marker.png) 0 0 no-repeat;
}

CSS

24.01.2019, обновлено 31.10.2019

7325

#CSS #HTML #Меню

В закладки

Другие публикации

Одна рамка между блоками

Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.

Фон под текстом

С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.

Contenteditable – текстовый редактор

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а…

Генерация счета на оплату PDF PHP

С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf — это конвертер HTML в PDF который…

Описание мета-тегов

В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.

Создание панели поиска с использованием HTML и CSS 8

< головка >

< title >

Создание панели поиска с использованием HTML и CSS

   название   > 
         
         <   мета   имя 900 08  =   "область просмотра" 
             контент   =   "width=device-width, initial -scale=1"   > 
         
         <   ссылка   отн. 900 08  =   "таблица стилей"   href   = 
  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"   > 
  
         <   стиль   > 
             
             /* список стилей * / 
             #navlist { 
                 background-color: #0074D9; 
                 позиция: абсолютная; 
                 ширина: 100%; 
             } 
             
             /* стиль элемента привязки navlist */ 
             #navlist a { 
                float:left; 
                 дисплей: блок; 
                 цвет: #f2f2f2; 
                 text-align: center; 
                 отступ: 12 пикселей; 
                 украшение текста: нет; 
                 размер шрифта: 15 пикселей; 
             } 
             . navlist-right{ 
 900 07                поплавок:право; 
             } 
  
             /* эффект наведения на якорный элемент навигационного списка */ 9 0008
             #navlist a:hover { 
                 background-color: #ddd; 
                 цвет: черный; 
             } 
             
             /* стиль строки поиска */ 
             .search input[type=text]{ 
                 ширина:300 пикселей; 
                 высота: 25 пикселей; 
                 border-radius:25px; 
                 граница: нет; 
  
             } 
             
             . search{ 
                 float:right; 
                 margin:7px; 
  
             } 
             
             .search button{ 
                 background-color: #0074D9; 
                 цвет: #f2f2f2; 
                 с плавающей запятой: справа; 
                 отступы: 5 пикселей 10 пикселей; 
                 поле справа: 16 пикселей; 
                 размер шрифта: 12 пикселей; 
                 граница: нет; 
                 курсор: указатель; 
             } 
           стиль   > 
    головка   > 
  
 9000 6  <   корпус   > 
         
       
        <   div   id   =   "navlist"   > 
             < 9000 8  a   ссылка   =   "#"   >Главная  a   > 
             <   a   href   =   "#"   >Наша продукция  a   > 
             <   a   href   =   "#"  9 0007 >Карьера  a   > 
             <   a   href   =   "#"   >О нас  a   > 
            <   a   href   =   "#"   >Контакты  a   > 
             
           
 900 07            <   раздел   класс   =   "поиск"   > 
                 
                 <   форма  9 0007 действие   =   "#"   > 
                           <   ввод  900 07 тип   =  " текст" 
                        заполнитель   =   "Поиск курсов" 
                         имя   =   "поиск"   > 
                     <   кнопка   > 
                       <   i   класс   =   "fa фа-поиск " 
                            стиль   =   "размер шрифта: 18 пикселей;"   > 
                           i   > 
                      кнопка   >  9 0009                  форма   > 
               раздел   > 
           дел   > 
         
 9 0007      
         <   раздел   класс   =   "содержание"   > 
             <   h2   стиль   =   "color:green; padding-top:40px; "   > 
                 GeeksforGeeks 
               h2   > 
             
             <   b   > 
                 Информатика 
 9000 6                 Портал для гиков 
               b   > 
             
    
  
  <   p   > 
                 Сколько раз вы ржавый пока 
                ищете хорошую подборку 
                 вопросы по программированию/алгоритму/интервью? 
                 Чего вы ожидали и что получили? 
                 Этот портал был создан, чтобы предоставлять 09                 объяснил решения для выбранных вопросов. 
               p   > 
  
  
 90 007          раздел   > 
    тело   > 
   9 0009    html   >                
 Как создать мегаменю с помощью модуля навигационного меню Astra? 
 Результатов не найдено. Повторить попытку с другими словами?
 Поиск должен быть не менее 3 символов.
 Назад к документу Аддон навигационного меню позволяет добавлять и создавать мегаменю. Мегаменю — это тип расширяемых меню, в которых отображаются различные варианты. 
 Если у вас есть веб-сайт с большим количеством опций и подстраниц более низкого уровня, то это идеальный вариант для их быстрого отображения.
 Astra предоставляет потрясающие возможности для разработки функциональности Mega Menu с помощью надстройки Nav Menu.
 
 Это дополнительная функция, доступная с подключаемым модулем Astra Pro. Чтобы использовать эти дополнения, на вашем веб-сайте должна быть установлена тема Astra вместе с плагином Astra Pro.
 Если вы хотите узнать больше о том, как это делается, вот пошаговое видео, созданное WPBuilders.
   Активация модуля 
 Выполните следующие действия, чтобы активировать модуль навигационного меню и изучить его параметры –
  Шаг 1  – Убедитесь, что у вас установлен и активирован плагин Astra Pro.
  Шаг 2 . Активируйте надстройку на панели управления WordPress  > Astra > Модули Astra Pro > Меню навигации. Мегаменю не работает, если вы создаете пользовательские заголовки с помощью Elementor, Beaver Builder и т. д.,
 Создайте мегаменю 
 Если вы хотите создать мегаменю, вам необходимо включить функции мегаменю для меню верхнего уровня. пункт, пункты дочернего меню которого вы хотели бы превратить в мегаменю.
   
 Выполните следующие шаги, чтобы сделать это:
  Шаг 1  — На панели управления WordPress перейдите к  Внешний вид > Меню. 
  Шаг 2  — Выберите пункт меню, под которым вы хотите добавить мегаменю.
  Шаг 3  — Разверните этот пункт меню и нажмите кнопку « Настройки меню Astra» .
  Мегаменю  Затем справа откроется всплывающее окно. Включите кнопку переключения Mega Menu здесь. Это включит опции мегаменю для всех подменю родительского меню. Он предоставляет опции для верхнего уровня/родительского меню. Вы можете установить ширину мегаменю на содержимое, контейнер меню или полное.
 
  Ширина мегаменю  – Установите здесь ширину вашего мегаменю. Вот доступные варианты:  Контент  — установите ширину меню на ширину вашего контента
  Ширина контейнера меню  — ограничение ширины основного меню
  Полная ширина  — установите ширину вашего мегаменю на ширину экрана, но ограничьте содержимое меню шириной содержимого.
  Полная ширина в растянутом состоянии  — установите ширину вашего мегаменю на полную ширину, от края до края.
  Custom Width  — задайте пользовательское значение ширины в пикселях.
  Значок:  Из списка доступных значков вы можете выбрать значок по вашему выбору, который будет отображаться до или после метки меню. Кроме того, вы можете установить размер значка и расстояние между ними.
  Этикетки с подсветкой  Это текст, который появляется рядом с пунктом меню. Он выделяет меню. Ярлыки могут быть «Бесплатно», «Распродажа», «Новинки», «Избранные» и т. д. Вы можете установить текст и цвет ярлыка.
  Шаг 4  — Щелкнув по дочернему меню, вы увидите следующие опции —
  Мегаменю   Как заголовок  : Включите этот параметр, если вы хотите, чтобы навигационный элемент меню обозначал заголовок для столбца. Так что это будет отображаться как заголовок, и все элементы дочернего меню будут отображаться под этим заголовком.  Примечание:  Убедитесь, что вы включили мегаменю для элемента родительского меню, чтобы увидеть эту опцию.
  Скрыть ярлык меню  Если вы хотите скрыть метку или описание подменю, выберите этот параметр.
 Если вы хотите скрыть метку или описание подменю, выберите этот параметр.
  Отключить ссылку:  Эта опция удалит ссылку на соответствующий пункт меню. Он будет отображать только заголовок меню.
 Эта опция удалит ссылку на соответствующий пункт меню. Он будет отображать только заголовок меню.
  Значок  Из списка доступных значков вы можете выбрать нужный значок, который будет отображаться до или после метки меню. Кроме того, вы можете установить размер значка и расстояние между ними.
 Из списка доступных значков вы можете выбрать нужный значок, который будет отображаться до или после метки меню. Кроме того, вы можете установить размер значка и расстояние между ними.
  Источник контента  Вы можете выбрать Источник контента для подменю. У него есть возможность выбрать пользовательский текст, шаблон или виджет. Вы можете отобразить пользовательский текст/HTML с помощью редактора или выбрать любой пользовательский шаблон/виджет. Если вы выберете опцию «Пользовательский шаблон», появится список всех доступных сообщений, страниц и пользовательских шаблонов.No related posts.