Три системы мобильной аналитики глазами digital-компаний
Задать вопрос
@superyashaaa
верстка

Как правильно создать навигационную панель?

Не как не пойму как его делать...

Мной было создано
/*
*/
.menu {
display: inline-block;
list-style-type: none;

}

Нужен-ли теги div с вложенным в него nav или можно без этого всего ?
Ps display: inline-block; не выставляет список горизонтально
  • Вопрос задан
  • 69 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
@nikwebzer0
Подставь свои названия для пунктов меню
<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="style/style.css">
	<!-- Подключаю стили Bootstrap4 для адаптивности -->
	<!-- CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>timemanager</title>
</head>

<body>
	<!-- Простейшее меню на BOOTSTRAP4 -->
	<nav class="navbar navbar-expand navbar-dark sticky-top bg-dark">
		<ul class="navbar-nav">
			<li class="nav-item"><a href="create.php" class="nav-link">Создать задание</a></li>
			<li class="nav-item"><a href="view.php" class="nav-link">Посмотреть задание</a></li>
			<li class="nav-item"><a href="export.php" class="nav-link">Экспортирование в XML</a></li>
		</ul>
	</nav>

Бутстрап ,позволяет очень быстро верстать , документация есть на русском языке!
Ответ написан
1 комментарий
Нравится 1 комментарий
AntonLitvinenko
@AntonLitvinenko
HTML coder
diaplay: inline-block задается элементам, а не обертке.
Собственно меню можно делать как заблагорассудится, хоть просто из ссылок, все зависит от того, чего вы добиваетесь. Если хотите нормальную поддержку доступности, то это будет nav>ul>li>a, div вокруг nav по ситуации, опять же зависит как будет реализовано мобильное меню итд.
Вот пример разметки:
<div class="header-menu">
	<nav class="main-nav">
		<button type="button" class="close-menu-btn">&times;</button>
		<ul class="main-menu">
			<li class="menu-item-has-children">
				<a href="#1">Про компанію</a>
				<span class="submenu-toggle"></span>
				<ul class="sub-menu">
					<li><a href="#1">Умови співпраці</a></li>
					<li><a href="#1">Галарея</a></li>
					<li><a href="#1">Партнери</a></li>
				</ul>
			</li>
			<li><a href="#1">Автопарк</a></li>
			<li><a href="#1">Послуги</a></li>
			<li><a href="#1">Вартість робіт</a></li>
			<li><a href="#1">Контакти</a></li>
		</ul>
	</nav>
	<button type="button" class="menu-toggle">&#9776;</button>
</div>
Ответ написан
1 комментарий
Нравится 1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Перенос Webflow ресурса на Wordpress, с созданием там CMS и подключением оплаты
Rubraga
До 50 000 ₽
👨‍💻 Frontend / Backend программист на постоянную удаленную работу
Rich Media Sites
от 100 000 ₽
Front-end Developer Angular
Orderz.pro • Москва
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Срастить три программы на Python3 в одну
23 янв. 2021, в 18:06
5000 руб./за проект
Торговый бот для Binance
23 янв. 2021, в 17:51
150000 руб./за проект
Landing Page советника форекс под ключ
23 янв. 2021, в 17:34
10000 руб./за проект
Ещё заказы