将每个导航元素包装在 div 中是否合适?
Is it appropriate to wrap each navigation element in a div?
我正在学习 HTML + CSS 并且在一个网站上工作,我需要在左侧有一个垂直导航栏,它有四个可以交互的元素。用 div 包装这四个元素中的每一个是标准做法,还是有更优雅或更语义化的方法来解决这个问题?我希望每个元素都有与之关联的独特的点击功能,这就是为什么我认为给它们 divs 和 类 对以后与它们交互最有意义。
谢谢!
HTML结构:
有很多方法可以实现垂直导航。
最常见的是使用 ul
和 li
:
<div id="lnav_container">
<ul id="lnav">
<li class="lnav_item"><a href="#">Item 1</a></li>
<li class="lnav_item"><a href="#">Item 2</a></li>
<li class="lnav_item"><a href="#">Item 3</a></li>
<li class="lnav_item"><a href="#">Item 4</a></li>
</ul>
</div>
在 li
中包含 a
标签也很常见。
样式:
您可以通过为 ul
.
添加 list-style-type: none;
来摆脱子弹
您可以使用 :hover
选择器在悬停时为它们提供不同的样式,以使其更具交互性。
.lnav_item {
width: 74%;
margin-top: 10px;
}
.lnav_item:first-child {margin-top: 0px;}
.lnav_item.selected {width: 86%;}
.lnav_item a {
display: inline-block;
width: 100%;
line-height: 30px;
padding: 8px 5px 5px 0px;
background-color: yellow;
color: black;
font-weight: bold;
text-decoration: none;
border-radius: 2px 12px 12px 2px;
}
.lnav_item.selected a {
background-color: green;
color: white;
font-size: 18px;
}
.lnav_item:hover a {background-color: orange;}
要摆脱 a
下划线,请使用 text-decoration: none;
并根据需要覆盖其默认颜色。
Javascript (jQuery):
将 clickListener
绑定到项目很容易:
$('.lnav_item a').on('click', function() {
//$(this) item is clicked, do whatever you want
$('.lnav_item').removeClass('selected');
$(this).parent().addClass('selected');
});
编辑:
如果您想为每个导航项赋予不同的样式等,您可以通过不同的方式实现:
您可以使用 CSS' nth-child()
选择器:
.lnav_item:nth-child(2):hover a{background-color: #252F1D;}
.lnav_item:nth-child(3):hover a{background-color: white;}
如果您在 jQuery 中执行此操作,或者您可以使用带参数 (index) 的函数,如果需要可以使用 eq
。
$('.lnav_item > a').each(function(index) {
if(index == 0) {
//give it a different onClick, CSS rule, etc
}
//and so on
});
index
是从零开始,而nth-child
是从一开始。
站点导航菜单的典型 HTML5 标记是 nav
element that contains an ul
element:
<nav>
<ul>
<li><a href="/1">1</a></li>
<li><a href="/2">2</a></li>
<li><a href="/3">3</a></li>
<li><a href="/4">4</a></li>
</ul>
</nav>
如果您的 CSS/JS 可以使用此标记(+ class
属性或任何您需要的),那就太好了。
如果您需要更多元素,请添加 div
and/or span
元素:它们是 meaningless,因此它们不会改变文档的语义。
NAV 元素只是列表。
你不需要用任何东西包裹它们。
这是我自己的导航面板示例(我也将它放在屏幕的左侧)
<nav>
<ul style="list-style: none">
<h3>Main Menu</h3>
<li style="font-size: 100%"><b>Article 1</b></li>
<ul style="list-style: none">
<br>
<dt>
<li style="font-size: 100%"><a href="Article 1.1">Article
1.1</a>
</li>
<br>
<li style="font-size: 100%"><a href="Article 1.2">Article
1.2</a>
</li>
<br>
</dt>
</ul>
<br>
</nav>
我正在学习 HTML + CSS 并且在一个网站上工作,我需要在左侧有一个垂直导航栏,它有四个可以交互的元素。用 div 包装这四个元素中的每一个是标准做法,还是有更优雅或更语义化的方法来解决这个问题?我希望每个元素都有与之关联的独特的点击功能,这就是为什么我认为给它们 divs 和 类 对以后与它们交互最有意义。
谢谢!
HTML结构:
有很多方法可以实现垂直导航。
最常见的是使用 ul
和 li
:
<div id="lnav_container">
<ul id="lnav">
<li class="lnav_item"><a href="#">Item 1</a></li>
<li class="lnav_item"><a href="#">Item 2</a></li>
<li class="lnav_item"><a href="#">Item 3</a></li>
<li class="lnav_item"><a href="#">Item 4</a></li>
</ul>
</div>
在 li
中包含 a
标签也很常见。
样式:
您可以通过为 ul
.
添加 list-style-type: none;
来摆脱子弹
您可以使用 :hover
选择器在悬停时为它们提供不同的样式,以使其更具交互性。
.lnav_item {
width: 74%;
margin-top: 10px;
}
.lnav_item:first-child {margin-top: 0px;}
.lnav_item.selected {width: 86%;}
.lnav_item a {
display: inline-block;
width: 100%;
line-height: 30px;
padding: 8px 5px 5px 0px;
background-color: yellow;
color: black;
font-weight: bold;
text-decoration: none;
border-radius: 2px 12px 12px 2px;
}
.lnav_item.selected a {
background-color: green;
color: white;
font-size: 18px;
}
.lnav_item:hover a {background-color: orange;}
要摆脱 a
下划线,请使用 text-decoration: none;
并根据需要覆盖其默认颜色。
Javascript (jQuery):
将 clickListener
绑定到项目很容易:
$('.lnav_item a').on('click', function() {
//$(this) item is clicked, do whatever you want
$('.lnav_item').removeClass('selected');
$(this).parent().addClass('selected');
});
编辑:
如果您想为每个导航项赋予不同的样式等,您可以通过不同的方式实现:
您可以使用 CSS'
nth-child()
选择器:.lnav_item:nth-child(2):hover a{background-color: #252F1D;} .lnav_item:nth-child(3):hover a{background-color: white;}
如果您在 jQuery 中执行此操作,或者您可以使用带参数 (index) 的函数,如果需要可以使用
eq
。$('.lnav_item > a').each(function(index) { if(index == 0) { //give it a different onClick, CSS rule, etc } //and so on });
index
是从零开始,而nth-child
是从一开始。
站点导航菜单的典型 HTML5 标记是 nav
element that contains an ul
element:
<nav>
<ul>
<li><a href="/1">1</a></li>
<li><a href="/2">2</a></li>
<li><a href="/3">3</a></li>
<li><a href="/4">4</a></li>
</ul>
</nav>
如果您的 CSS/JS 可以使用此标记(+ class
属性或任何您需要的),那就太好了。
如果您需要更多元素,请添加 div
and/or span
元素:它们是 meaningless,因此它们不会改变文档的语义。
NAV 元素只是列表。
你不需要用任何东西包裹它们。
这是我自己的导航面板示例(我也将它放在屏幕的左侧)
<nav>
<ul style="list-style: none">
<h3>Main Menu</h3>
<li style="font-size: 100%"><b>Article 1</b></li>
<ul style="list-style: none">
<br>
<dt>
<li style="font-size: 100%"><a href="Article 1.1">Article
1.1</a>
</li>
<br>
<li style="font-size: 100%"><a href="Article 1.2">Article
1.2</a>
</li>
<br>
</dt>
</ul>
<br>
</nav>