Задать вопрос
@Gleb316
Учиться и не бросать на половине.
html

Адаптированное меню как правильно селать?

Всем привет, начинаю создавать свой первый адаптированный сайт под все устройства. И сейчас я делаю меню сайта, которое должно при уменьшении экрана сворачиваться в маленькую кнопку, при нажатии на которую вылазило меню.
так вот я делаю так.
делаю меню добавляю к нему классы и через медиа запросы они изменяются при изменении ширины экрана
@media(max-width:767px){.container{wigth:100px;}}
           @media(min-width:768px){.container{wight:50px;}}

к примеру. К одному и томуже классу в разных медиа запросах писать писать стили. Правильно ли я делаю ? и можно ли так ?
  • Вопрос задан
  • 798 просмотров
1 комментарий
Подписаться 2 Оценить 1 комментарий
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Примерно правильно, если Вы имели в виду адаптивное меню.
(Если именно адаптированное, то нет)

Обычно достаточно писать media размеры в одну сторону, т.е. либо всегда min, либо всегда max, в правильном порядке.

Писать надо только изменяющиеся свойства. Т.е. если ширина какого-то блока была 100% от общей ширины окна браузера, то ее можно не переписывать и не пересчитывать на точки.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@AndreyMyagkov 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Меню</title>
</head>
<body>

	<nav class="b-topnav">
		<button class="b-menu-toggle js-menu-toggle"><span class="menu-toggle__line"></span></button>
		<ul class="b-topmenu__list js-topmenu__list">
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 1</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item active">
				<a href="" class="topmenu__link">Пункт меню 2</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem active"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 3</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 4</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 5</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
		</ul>
	</nav>



	<div class="same-block">
		<code>
			Emmet: nav.b-topnav>button.b-menu-toggle>span.menu-toggle__line^+ul.b-topmenu__list.js-topmenu__list>li.topmenu__item*5>a.topmenu__link*4{Пункт меню $}+ul.topmenu__sublist>li.topmenu__subitem*5>a.topmenu__sublink*4{Пункт меню второго уровня $}
		</code>
	</div>

<style>
*{
	margin:0;
	padding: 0;
	line-height: 1;
}
li {
	list-style-type: none;
}
html{
	font-size: 16px;
	font-family: Arial, sans-serif;
}
.same-block{
	background-color: lightblue;
	height: 500px;
	padding: 3em;
}
/* NAVBAR */
.b-menu-toggle {
	width: 34px;
	height: 34px;
	margin: 3px;
	background: none;
	border: solid 1px #666;
	padding: 4px;
	border-radius: 3px;
	cursor: pointer;
	outline: none;
}
.menu-toggle__line:after,
.menu-toggle__line:before {
    content: "";
    position: absolute;
    left: 0;
    top: -9px;
}
.menu-toggle__line:after {
    top: 9px;
}
.menu-toggle__line {
    position: relative;
    display: block;
}
.menu-toggle__line,
.menu-toggle__line:after,
.menu-toggle__line:before{
    width: 100%;
    height: 2px;
    background-color: #333;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 2px;
}
.b-menu-toggle.on .menu-toggle__line {
    background-color: transparent;
}
.b-menu-toggle.on .menu-toggle__line:before {
    transform: rotate(45deg) translate(6px, 7px);
}
.b-menu-toggle.on .menu-toggle__line:after {
    transform: rotate(-45deg) translate(6px, -7px);
}
@media (min-width: 240px){
	.b-topnav {
		position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	background-color: #fff;
    	z-index: 99999999;
    	overflow-y: auto;
    	box-shadow: 0 1px 3px rgba(100,100,100,0.9);
    	max-height: 400px;
    	max-height: 90vh;
	}
	.b-topmenu__list {
		margin: 0 0 0.5em 3px;
		max-height: 0;
		overflow:hidden;
    	transition: max-height ease-out .3s;
	}
	.b-topmenu__list.on {
		max-height: 1000px;
		
	}
	.topmenu__item {
		display: block;
		padding: 0.5em 0;
	}
	.topmenu__link {
		color: #333;
		text-transform: uppercase;
	}
	/* level 2 */
	.topmenu__sublist{
		margin: 0.5em 0 0.5em 1em;
	}
	.topmenu__sublink {
		color: #333;
	}
	.topmenu__item.active .topmenu__link,
	.topmenu__link:hover,
	.topmenu__subitem.active .topmenu__sublink,
	.topmenu__sublink:hover {
		color: #007eff;
	}
}
@media (min-width: 768px){
	.b-menu-toggle {
		display: none;
	}
	.b-topnav {
		position: relative;
    	top: 0;
    	left: 0;
    	right: 0;
    	background-color: #007eff;
    	z-index: 0;
    	overflow-y: initial;
    	box-shadow: none;
    	max-height: none;
    	margin-bottom: 20px;
	}
	.b-topmenu__list {
		margin-left: 0;
		display: table;
		width: 100%;
		background-color: #007eff;
		overflow: visible;
	}
	.topmenu__item {
		display: table-cell;
		padding: 0.5em 0;
		text-align: left;
		position: relative;
	}
	.topmenu__link{
		padding: 0 1em;
		color: #fff;
	}
	.topmenu__link:hover,
	.topmenu__item.active .topmenu__link{
		color: #333;
	}
	/*level 2 */
	.topmenu__sublist{
		margin:0;
		display: none;
		background-color: #007eff;
	}
	.topmenu__item:hover>.topmenu__sublist,
	.topmenu__item>.topmenu__sublist:hover {
		display: block;
		position: absolute;
		top:25px;
		left:0;
		right: 0;
	}	
	.topmenu__subitem {
		display: block;
		padding: 0.5em 1em;
		text-align: left;
	}
	.topmenu__sublink {
		color: #fff;
		line-height: 1.3;	
	}
	.topmenu__subitem.active>.topmenu__sublink,
	.topmenu__subitem:hover>.topmenu__sublink  {
		color: #333;
	}
}
/* /NAVBAR */
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
	/*Мобильное меню*/
	$(".js-menu-toggle").on('click', function() {
	  $(this).toggleClass('on');
	 
	   $(".js-topmenu__list").toggleClass('on');
	  return false;
	});
</script>
</body>
</html>
Ответ написан
Комментировать
Комментировать
miha872287
@miha872287
Подключите bootstrap и создайте меню а дальше стилями как вам нужно
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сборка приложения под Astra Linux 1.7
22 нояб. 2024, в 13:33
7000 руб./за проект
На сайте на modx сделать три задачи
22 нояб. 2024, в 13:15
3000 руб./за проект
Убрать ошибку settings.php при входе в админку Битрикс 1с
22 нояб. 2024, в 13:09
500 руб./за проект
Ещё заказы