标签: nav
在导航栏中使用<ul>标签的技术原因.有没有？
有没有任何技术原因(CSS/jQuery相关)为什么要使用<ul>标签导航栏,而不是只使用a标签？
<nav>
<ul class="links">
<li><a href="/">Home page</a></li>
<li><a href="/about">About page</a></li>
</ul>
</nav>
VS
<nav>
<a href="/">Home page</a>
<a href="/about">About page</a>
</nav>
推荐指数
解决办法
查看次数
html5 NAV TAG正确用法
我已经开始在我的页面上使用html标签,而我正在尝试确定NAV标签的正确用法.我已经阅读了文档,看起来我应该对我的内容感到满意,但我注意到大多数其他开发人员在"ul""li"标签中都有导航"块".我使用div.
我的问题是,使用"ul""li"标签而不是div的优点/缺点是什么？
以下是否适用于导航？
<nav>
<div id="navBar">
<div id="navItem1"><a></a></div>
<div id="navItem2"><a></a></div>
<div id="navItem3"><a></a></div>
<div id="navItem4"><a></a></div>
</div>
</nav>
推荐指数
解决办法
查看次数
我们应该将 <ul> 标签放在 <nav> 标签中吗？
我想知道很多网站都把标签放在标签里面，从规范来看，导航标签有锚标签，这里是w3schools 中的例子，为什么许多网站是这样的：
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
这是正确的还是我们应该只做这样
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
推荐指数
解决办法
查看次数
如何使用jQuery或vanilla JS检测链接是否隐藏在折叠的twitter bootstrap导航栏中
我在检测Twitter引导响应导航栏中导航链接在崩溃状态时的可见性时遇到问题.
问题的根源是.collapsed div有一个溢出:隐藏规则设置.这意味着虽然导航ul具有非零维度,但它仍然是隐藏的,因为.collapse容器的高度为零(在关闭状态下在style属性中设置).
问题是,如果#some-nav-link是.nav ul中的li项之一,它将与$('#some-nav-link:visible')匹配,因为它不知道元素是被溢出所隐藏.
是否有一种万无一失的方法来检查元素的可见性,这可以解释这个问题？
我尝试使用li $ .fn.offset()方法依赖elementFromPoint,但是在li会有一些填充的情况下它是不够的,例如,在这种情况下,elementFromPoint返回li的父亲之一.
注意 - 我的代码是相关网站上的第三方代码,因此我无法更改导航栏的工作方式.
重要更新 我正在寻找一种独立于twitter bootstrap崩溃工作原理的解决方案.这是确定溢出的子元素溢出部分中元素可见性的问题的一般解决方案:隐藏元素.我觉得把这个问题与提出这个问题的具体问题联系起来会更好,但如果当前的问题会被视为混乱,我愿意相应地修改它.我希望这次更新已经足够了.
感谢阅读,我期待着一些聪明的解决方案!
这是一个显示检查的小提琴:崩溃时可见返回 true- http://jsfiddle.net/VDR3Y/
推荐指数
解决办法
查看次数
如何居中对齐菜单中的项目？
如何居中对齐菜单中的项目？（lis）我设法使菜单（ul）居中于我的网站页面内，但我无法使菜单中的实际项目居中（首页，关于等）。
您可以在此处编辑我的HTML / CSS：http : //jsfiddle.net/66reH/
要查看结果
CSS / HTML：
#nav {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
margin-left:auto;
margin-right:auto;
background-color: #eee;
padding: 5px;
height: 38px;
width: 913px;
font-weight: bold;
border-style:solid;
border-width:4px;
border-color: #000;
}
#nav ul {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 170px;
}
#nav ul li {
list-style-type: none;
text-align: center;
float: left;
margin: 0px;
}
#nav ul li a {
text-decoration: none;
color: #000; …推荐指数
解决办法
查看次数
Bootstrap 3.0.0导航垂直崩溃响应
经过多次搜索没有结果,我试着发一个帖子.
我正在寻找从bootstrap 3.0.0(http://getbootstrap.com/components/#nav-pills)导航堆叠(垂直菜单)的方法,或者当使用平板电脑或智能手机时我的侧边栏会折叠(例如作为导航栏).
如果结果是垂直响应菜单,我同意使用导航堆叠的其他组件.
我的代码
<div class="col-md-2">
<div class="panel panel-default" id="sidebar" >
<div class="panel-heading" style="background-color:#888;color:#fff;" data-target="#test">Sidebar</div>
<div class="panel-body" id="test">
<ul class="nav nav-stacked nav-collapse">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<hr>
<div class="col col-span-12">
<i class="icon-2x icon-facebook"></i>
<i class="icon-2x icon-twitter"></i>
<i class="icon-2x icon-linkedin"></i>
<i class="icon-2x icon-pinterest"></i>
</div>
</div><!--/panel body-->
</div><!--/panel-->
</div><!--/end left column-->
预先感谢您的帮助 :-)
vertical-alignment nav responsive-design twitter-bootstrap twitter-bootstrap-3
推荐指数
解决办法
查看次数
如何在nav元素内更改字体颜色？
我有一个元素，并且想要更改其中的链接的颜色，但是页面上所有其他链接的样式均使用以下CSS：
a:link {
color:#22b14c;
text-decoration:none;
}
这是导航：
<nav id="Nav">
<a href="index.html">Home</a> |
<a href="Gallery.html">Library</a> |
<a href="Contact.html">Contact</a> |
<a href="About.html">About</a>
</nav>
和导航CSS：
#Nav {
margin-top: 20px;
background-color: #000000;
color: #f2f2f2;
font-size: 40px;
font-family: "Calibri";
text-align: center;
}
我在nav元素中尝试了一个跨度，但是没有用。如何仅在元素内部更改这些链接的颜色？
推荐指数
解决办法
查看次数
将数据属性添加到wp_nav_menu
我有以下代码:
$nav_menu_args = array('fallback_cb' => '','menu' => 'menu', 'menu_class' => 'menu_class');
$x = wp_nav_menu( apply_filters( 'widget_nav_menu_args', $nav_menu_args, 'menu', $args ) );
$pattern = '#<ul([^>]*)>#i';
$replacement = '<ul$1 data-attr="abc">'; // this is a wrong
echo preg_replace( $pattern, $replacement, $x );
我想一个添加data-attr到ul通过改变模式,而无需通过更改Walker_Nav_Menu.
我想要做的是有一个这样的列表:
<ul class="menu_class" data-attr="abc">
<li><li>
<li>
<ul>
<li></li>
</ul>
<li>
</ul>
但是我也data-attr喜欢这样的内心.
<ul class="menu_class" data-attr="abc">
<li><li>
<li>
<ul data-attr="abc">
<li></li>
</ul>
<li>
</ul>
我错过了什么？
推荐指数
解决办法
查看次数
Bootstrap导航栏重叠体内容
我的Bootstrap导航栏存在一些问题.
我在导航栏中有很多选项卡,因此标题位于单独的行上,标签位于第二行,这看起来不太好.
因为导航栏需要2行,所以它会在我的页面上隐藏一些内容,例如在附加图像中有一个标题"请选择群集平均文件...."但是你看不到它,因为导航栏重叠并隐藏它.
我该如何解决这个问题？我希望导航栏只显示有限的标签,尽可能在一行导航栏中显示,并在汉堡菜单中隐藏其他标签.因此它不会隐藏我的身体内容并且看起来也很好.
PS:当我将窗口调整为移动视图时,不会出现这些问题,因为会出现汉堡包菜单.
全窗口
移动视图
导航栏的代码默认使用ASP.NET Core Web应用程序,我改变的主题是它的主题是"反向"
这是代码
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">ChromSACT</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index" class="aa"><span class="glyphicon glyphicon-home" style="margin-right:6px;"></span>Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Cell">Input</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="CellResult">Marks</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="CellResultRegions">Regions</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="ClusterBits">Cluster Bits</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="RegionsMatrix">Regions Matrix</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="MarksMatrix">Marks …推荐指数
解决办法
查看次数
Bulma - 导航栏徽标图像不适应导航栏高度。如何更改徽标图像的大小？
我刚刚开始使用 Bulma ( bulma.io ) 并希望将此图像调整为导航栏高度，我认为默认情况下它是 3.25rem（16px 基本字体大小），但事实并非如此。
我已经尝试将图像大小调整为 600px x 140px 没有运气，我在谷歌上搜索了很多但仍然无法修复它。但是，如果我使用 600px x 140px 的示例 bulma 图像，它可以工作吗？这是使用 bulma 图像的代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="https://bulma.io/images/bulma-logo.png">
</a>
</div>
</nav>我的代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="https://preview.ibb.co/bVUFKU/logo_transparent.png" alt="logo_transparent">
</a>
</div>
</nav>推荐指数
解决办法
查看次数