Меню для адаптивных версий сайта

Здравствуйте уважаемые начинающие веб-мастера.

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

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

Всем, наверное, уже знакомы три горизонтальные палочки, открывающие меню настроек в Chrome, или панель управления в консоли WordPress.

Точно такой же можно сделать для открытия нашего меню, причём всё будем делать без использования скриптов, только html и css.

Вот примерно так это будет смотреться в спокойном состоянии.

Адаптивный дизайн

А примерно так, при наведении курсора на значок три палочки.

Адаптированное горизонтальное меню

Как видите, все ссылки, которые у нас располагались горизонтально в полноразмерной версии, теперь открываются вертикально, и по ним будет удобно перейти, даже имея здоровую пятерню и толстые пальцы.

Итак, код меню

CSS:

.meny {
	position: absolute;
	top: 130px;
	left: 0;
	display: block;         
	padding: 5px;
}

.htm {             
	width: 40px;
	padding: 5px;
	}
	
  ul {             
	width: 150px;
	text-align: center;
	font-size: 20px;
	list-style-type: none;
	}
	
  li ul {             
	position: absolute;     
	display: none;          
	}
	
  li a {              
	display: block;	
	}
	
  li a:hover {         
	color:#FA6132;	
	}
	
   li a:active {        
	color: #ef7a04;
	}
  li:hover ul {         
	display: block;
   }
   
   .punct {
	 background: #2AB8A9;
	 text-align: center;
	 padding: 15px;
	 border-radius: 2px;
	 box-shadow: 0px 0px 0px 1px #3E5C54;
	 margin: 0 0 0 -30px; 
   }

HTML:

  <ul class="meny">
   <li class="htm"><span style="font-weight: bold; font-size: 40px;">&equiv;</span>
    <ul> 
     <li><a class="punct" href="http://address post">Главная</a></li> 
     <li><a class="punct" href="http://address post">О сайте</a></li>   
     <li><a class="punct" href="http://address post">Плагины WordPress</a></li>   
     <li><a class="punct" href="http://address post">Полезные советы</a></li>
     <li><a class="punct" href="http://address post">Установка программ</a></li>
     <li><a class="punct" href="http://address post">Шпаргалки</a></li>	 
    </ul> 
   </li>
    </ul>

В CSS Вы можете переделать внешний вид и цвет меню под свой дизайн, а в HTML добавить, или наоборот убавить пункты меню.

Теперь посмотрим, куда всё это разместить, чтоб меню появилось на странице.

Заходим Консоль — Внешний вид — Редактор — Заголовок (header.php), и перед закрывающим </div><!— #header —>, вставляем HTML.

HTML код меню

Обновляем файл, и тут же в редакторе заходим в файл style.css, и сразу после директивы @media screen and (max-width: 600px), вставляем css код.

Весь код у меня на картинке не уместился, так что покажу только начало.

103

И ещё, до медиа запросов нужно вставить запрет на показ меню в полном формате

104

Теперь Вам останется только подправить значения в свойствах position, чтоб разместить меню там, где Вам будет удобнее.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перекур

Адаптивный каркас сайта < < < ◊ > > > Адаптивный дизайн — легко

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

10 комментариев на «Меню для адаптивных версий сайта»

  1. stariс говорит:

    А ведь точно. Вот, не вспомнил сразу.

  2. Алекс говорит:

    По поводу квадратика на другом сайте в коде было правило
    list-style: none и это способствовало убиранию маркера. Спасибо Вам, что уделили внимание и за ваши сайты.

  3. stariс говорит:

    Да есть. Правда у меня в Chrome он почему-то не появляется, я и не чешусь. Квадратик создаёт тег ul. Нужно покопать на что его можно заменить. Попробуйте в первой и последней строках html вместо ul применить div, а во второй и предпоследней, вместо li поставить p. Или подождите, будет время я сам в этом покопаюсь и отпишу.

  4. stariс говорит:

    Этот символ в веб показывает скрытое меню

  5. stariс говорит:

    А где там php? Только html и css. Вы увидели php на картинке? Так ведь меню вставлено в файл header, а он-то написан на php, как и весь WordPress, но это к меню не относится. Просто код меню вставлен в код файла. В веб эти языки всегда применяются совместно.

  6. stariс говорит:

    Селектор .htm управляет элементом три горизонтальные палочки. А именно задаёт ему внутренний отступ, и ширину. А атрибут style в html, задаёт спецсимволу &equiv жирность и размер.

  7. Алекс говорит:

    Есть ли возможность, по Вашему мнению, убрать маркер, в виде квадратика, появляющийся слева от &equiv?

  8. Алекс говорит:

    Что значит эта строчка? ≡

  9. Алекс говорит:

    Без скриптов, но с PHP?

  10. Алекс говорит:

    Приветствую! Чем управлял селектор .htm?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *