Jump to content
  • 0

Горизонтальное меню без использования ul>li

vano1208

Asked by vano1208,

 Share

Question

vano1208 Explorer

vano1208

Posted
Posted

Подскажите, для чего горизонтальное меню оборачивать в ul>li, если можно обойтись только дескриптером '<a>'? Только чтобы меню формально было списком? В чем подвох и почему никто так не делает? Привожу ниже мой код и скриншот готового меню.

<!DOCTYPE html><title>Test Page</title><meta charset = "utf-8"><link rel = "stylesheet" href = "style.css"><div>	<nav>		<a href="#">Home</a>		<a href="#">Portfolio</a>		<a href="#">About</a>		<a href="#">Contacts</a>		<a href="#">Forum</a>		<a href="#">Support</a>		<a href="#">Callback</a>	</nav>	<header></header></div>
body {	margin: 0;	padding: 0;	font-family: Arial;}body div {	background: #eee;	height: 1000px;}nav {	display: block;	background: #333;	height: 34px;}nav a {	color: white;	display: block;	float: left;	line-height: 34px;	padding: 0px 20px;	text-decoration: none;	font-size: 12px;}nav a:hover {	background: #29b4f9;}header {	background: #29b4f9;	display:block;	height: 150px;}

7680322.png

 

P.S.: Может еще какие-то ошибки в коде есть, или можно написать как-то лучше — буду рад если не промолчите.

Link to comment
Share on other sites

24 answers to this question

Recommended Posts

  • 0
DivMan Explorer

DivMan

Posted
Posted (edited)

Немного не по вопросу, но хочу сказать: если элементу задать float, со значением left или right, то к нему автоматически прописывается свойство display, со значением block.

 

1) Зачем задавать жёсткую высоту?

2) Не забывай про очищение потока.

 

Так намного лучше http://jsfiddle.net/3o1pzwrn/

 

Мне кажется, если делать дополнительные обёртки, то это даёт дополнительное управление. 

Edited by DivMan
Link to comment
Share on other sites
  • 0
wwt Explorer

wwt

Posted
Posted

ммм хороший вопрос. я вот лично задумался, это наверное больше к тем кто хорошо шарит в семантике. Ибо с точки зрения конструктора вообще все можно верстать с помощью тега a+CSS

Link to comment
Share on other sites
  • 0
antonKar Explorer

antonKar

Posted
Posted
для чего горизонтальное меню оборачивать в ul>li, если можно обойтись только дескриптером ''?

Пережитки старой школы вёрстки.

 

ИМХО это неправильный путь, и от него нужно отказываться. Навигация — это nav, а список для контента.

 

Я делаю. Только чаще всего в связке nav+div+a, где div есть обёртка для визуального оформления 

Link to comment
Share on other sites
  • 0
afdw Explorer

afdw

Posted
Posted

Смысл есть. Если открыть страницу с меню ul > li в links2 (или любом таком браузере), или просто если не загрузятся стили, то меню будет красивым списком, а не просто кучей ссылок.

Link to comment
Share on other sites
  • 0
vano1208 Explorer

vano1208

Posted
  • Author
Posted (edited)

1) Зачем задавать жёсткую высоту?

2) Не забывай про очищение потока.

1. Временно поставил — смотрел сочетание цветов.

2. Я только занялся версткой и мало что знаю. Что такое очищение потока?

 

Смысл есть. Если открыть страницу с меню ul > li в links2 (или любом таком браузере), или просто если не загрузятся стили, то меню будет красивым списком, а не просто кучей ссылок.

Если не загрузятся стили, тогда меню станет вертикальным.

 

А вообще всем спасибо. Пока тему проверяли модераторы (первое сообщение), уже вычитал на форуме про избыточность  "display: block" с "float: " и наоборот и в одном из сообщений klierik'a прочитал про nav>a вместо ul>li для одноуровнего меню.

Edited by vano1208
Link to comment
Share on other sites
  • 0
afdw Explorer

afdw

Posted
Posted
пф, кого волнуют проблемы трёх с половиной мазохистов?
 

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

Link to comment
Share on other sites
  • 0
vano1208 Explorer

vano1208

Posted
  • Author
Posted

А как быть со многоуровневым меню c nav > a? Помнится, ссылку в ссылку вкладывать нельзя, да и nav в nav тоже как-то неправильно.

 

Мне кажется, если заранее известно о том, что вложенности не будет, можно отделаться nav>a (для меньшего загромождения), а если с вложенностью, использовать списки. Никто же не запрещает использовать и первый вариант и второй (если это логично). Я не прав?

Link to comment
Share on other sites
  • 0
afdw Explorer

afdw

Posted
Posted

Вот списочный вариант:

<ul>  <li>    <a>1</a>  </li>  <li>    <a>2</a>  </li>  <li>    <a>3</a>    <ul>      <li>        <a>3.1</a>      </li>      <li>        <a>3.2</a>      </li>      <li>        <a>3.3</a>      </li>    </ul>  </li>  <li>    <a>4</a>  </li></ul>

Вот вариант с nav:

<nav>  <a>1</a>  <a>2</a>  <a>3</a>  <a>4</a></nav>

И где тут вставить div?

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Как вариант, между 3-й и 4-й ссылкой, показывать через nav > a:hover + div (или типа того). Но, имхо, для дерева всё-таки вложенные списки более оправданы — так структура читается однозначно, в т.ч. машинами.

Link to comment
Share on other sites
  • 0
vano1208 Explorer

vano1208

Posted
  • Author
Posted (edited)

И где тут вставить div?

<nav>    <section>    <a href = "#">Link 1</a>        <nav>            <a href = "#">Link 1.1</a>            <a href = "#">Link 1.2</a>            <a href = "#">Link 1.3</a>        </nav>    </section>    <section>    <a href = "#">Link 2</a>        <nav>            <a href = "#">Link 2.1</a>            <a href = "#">Link 2.2</a>            <a href = "#">Link 2.3</a>        </nav>    </section>    <a href = "3">Link 3</a></nav>

Вот так набросал: https://jsfiddle.net/1fobL6sd/1/

Думаю, это есть правильный вариант с точки зрения семантики: использовать для панели навигации nav>a вместо ul>li. Конечно. Можно и списки использовать. Но для чего тогда вся эта волокита с <footer>, <header> и прочими семантическими тегами, если можно использовать "стандартный" <div class =''...">? Можно и <b>  сделать блоком и использовать в качестве контейнера. Один только вопрос — зачем?

Edited by vano1208
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Ой. Вот вложенными <nav> точно злоупотреблять не стоит, бедные слепые юзеры, когда их читалка заладит «Навигация. Навигация. Конец навигации. Навигация...» испугаются, что у них браузер зациклился). Внешний <nav> как раз семантически оправдан, чтобы им было легче перейти к навигации в любой момент (а до того пропустить ее), но еще внутри их множить - только плодить путаницу. Div-ы и то лучше.

Link to comment
Share on other sites
  • 0
vano1208 Explorer

vano1208

Posted
  • Author
Posted (edited)

Ой. Вот вложенными <nav> точно злоупотреблять не стоит, бедные слепые юзеры, когда их читалка заладит «Навигация. Навигация. Конец навигации. Навигация...» испугаются, что у них браузер зациклился). Внешний <nav> как раз семантически оправдан, чтобы им было легче перейти к навигации в любой момент (а до того пропустить ее), но еще внутри их множить - только плодить путаницу. Div-ы и то лучше.

 

А если использовать только nav>section?

<nav>  <section>    <a>Link 1</a>      <a>...</a>      <a>...</a>      <a>...</a>  </section></nav>/*Или так:*/<nav><section><header>Link 1</header><a>...</a><a>...</a><a>...</a></section></nav>/*?*/

Прошу прощения, если глупые предположения...

Edited by vano1208
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Предположения не глупые, но смысла в такой разметке не вижу. Непонятно, кто от нее выиграет, а неудобства тем же слепым юзерам (лишние логические области, между которыми придется переключаться, причем безымянные, т.к. <header> — еще не заголовок и имени разделу не дает) возможны.

 

На мой взгляд, меню с подуровнями — тот случай, где не стоит выдумывать лишнего, вложенные списки вполне справляются. Для полного счастья можно навесить на «выпадушки» соотв. ARIA-атрибуты, наподобие такого.

Link to comment
Share on other sites
  • 0
vano1208 Explorer

vano1208

Posted
  • Author
Posted (edited)

Вот что ответили в W3C:

 

7059422.png
 

 

 

Hello, Mike.
Sorry for my english. I have two questions. 
Please, say me, can I use nav>a structure instead of ul>li?
Also can I use <section> and <header> elements in <nav>? Like this:
<nav>
<section>
<header>Link-1</header>
<a>Link-1.1</a>
<a>Link-1.2</a>
<a>Link-1.n</a>
</section>
<section>
<header>Link-2</header>
<a>Link-2.1</a>
<a>Link-2.2</a>
<a>Link-2.n</a>
</section>
<a>Link-3</a>
</nav>
 
Great thanks!

 

 

 

Hi Иван,

Sorry for the delay in replying.

The answer is Yes. For both questions.

Yes, you can use nav>a structure instead of ul>li.

Yes, you can use <section> and <header> elements in <nav>.

So your example is valid.

  —Mike
Edited by vano1208
  • Like 1
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

IMHO section в nav хороши для разграничения принципиально разных типов навигации. Напр.,

<nav>  <section>     <h2>Структура сайта</h2>     <!-- ссылки на разделы сайта -->  </section>  <section>     <h2>История вопроса</h2>     <!-- ссылки на предысторию и продолжение текущего материала -->  </section>  <section>     <h2>На этой странице</h2>     <!-- быстрый переход к подзаголовкам и логическим областям внутри страницы -->  </section>  <aside>     <h2>Дополнительные материалы</h2>     <!-- ссылки на др. публикации по теме и т.п. -->  </aside></nav>

Для обычных подразделов дерева, имхо, отдельный section — несколько оверкилл :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Etaro
      Менюшка :<
      By Etaro
      Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.


    • Sve
      Проблема с меню на CSS
      By Sve
      Всем привет :)
      Пытаюсь сверстать свой первый макет, и возникла проблема с меню. Должно быть, как на первой картинке - это макет из фш.
      Выходит, как на второй, меню спадает вниз. 
      Прошу, пожалуйста, тыкните на ошибку в коде, и, если есть возможность, объясните. буду очень рада ответам!
      Код кидаю:
      *{margin: 0; padding: 0; outline: 0} .clearfix::after { content:""; height: 0; display: block; clear: both; } div .container { width: 1300px; margin: auto; background: #fff; } header { width: 100%; height: 130px; border-top: 8px solid #a292b3; position: fixed; z-index: 2; } .logo { margin: 30px 0 20px 170px; } .menu { float: right; margin-right: 145px; } .menu li { display: inline-block; list-style: none; padding: 35px; }  


    • Рома
      Выравнивание блока меню относительно кнопки вызова
      By Рома
      Доброго дня!
      Есть многоуровневое меню (картинка 1)
      Жму на кнопку Каталог - открывается блок с дополнительным содержимым. В этом содержимом есть подменю и под-под меню. Проблема тут такая часть содержимого из правого под-под меню не умещается на экране. Все потому, что блок с доп. содержимым относительно кнопки КАТАЛОГ открывается с выравниванием по левой своей части.
      Вот код в этом положении
      .cs-menu-container .dropdown, ul.type-category li .sub-cate { position: absolute; top: auto; left: 0; z-index: 1000; float: none; min-width: 230px; padding: 0; margin: 0; border: 1px solid #cccccc; border-top:2px solid #c04a62; background: #fff; Что я делаю: 
      меняю значение left: на -200px;
      В итоге получаю нужное мне расположение (картинка 2)
      Но тут же исправляя одно я получаю вторую проблему: блок содержимого кнопки ИНФОРМАЦИЯ уходит далеко влево от самой кнопки вызова (картинка 3)
       
      Какие мне элементы использовать в коде, чтобы выравнивание всех блоков меню (который появляется при нажатии на кнопку) происходило по центру самого блока относительно кнопки? Как правильно выровнять блок относительно кнопки?
       



    • garmoni
      Как привязать выпадающее меню к событию нажатия кнопки?
      By garmoni
      Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии.
      <nav class="nav"> <div class="nav__btn"> <a id="nav-toggle" href="#"><span></span> </a> </div> <ul class="nav__list"> <li> <a href="#" class="nav__link">Episodes</a> </li> <li> <a href="#" class="nav__link">Characters</a> </li> <li> <a href="#" class="nav__link">Park</a> </li> <li> <a href="#" class="nav__link">Gallery</a> </li> <li> <a href="#" class="nav__link">actors</a> </li> </ul> </nav> $(document).ready(function(){ $('#nav-toggle').click(function(){ $(this).toggleClass('active'); }); .nav__list { display: none; } #nav-toggle {position: relative; display: inline-block; width:42px; height:25px;} #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 42px; background: #000; border-radius: 2px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); }  
    • d0ublezer0
      Посоветуйте многоуровневое адаптивное меню с гамбургером
      By d0ublezer0
      Собственно, вопрос в заголовке.
      Хочется добротное адаптивное меню, складывающееся в гамбургер. Нравится поведение http://mmenu.frebsite.nl/ с выплывающими уровнями в мобильной версии, но оно устроено так, что растянуто по всей высоте, как в приложении. А в десктопном варианте оно должно именно "выпадать". например, как на https://www.ulmart.ru/catalog/mobile_charger
      Поделитесь советами из опыта пожалуйста?
       
       
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept