[英]CSS / HTML How do I add a 'title' to my menu bar?
I'm using a menu bar, which I will link the code to below.我正在使用菜单栏,我会将代码链接到下面。 I was wondering if there was a way which I could add the name of my website to the very left of the menu bar, like a title, thanks.
我想知道是否有一种方法可以将我的网站名称添加到菜单栏的最左侧,例如标题,谢谢。
Menu bar code:菜单条码:
<nav role='navigation'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Undefined</a></li>
<li><a href="#">Undefined</a></li>
<li><a href="#">Undefined</a></li>
<li><a href="#">Undefined</a>
<ul>
<li><a href="">Undefined</a></li>
<li><a href="">Undefined</a></li>
</ul>
</li>
<li><a href="#">Undefined</a></li>
<li><a href="#">Undefined</a></li>
</ul>
</nav>
<style type="text/css" >
@import url(http://fonts.googleapis.com/css?family=Lato);
*, *:before, *:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
}
/*| Navigation |*/
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
z-index: 111
}
nav ul{
list-style: none;
position: relative;
float: right;
margin-right: 100px;
display: inline-table;
}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li:hover{background: rgba(0,0,0,.15);}
nav ul li:hover > ul{display: block;}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li a{
display: block;
padding: 30px 20px;
color: #222;
font-size: .9em;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul{
display: none;
background: #fff;
position: absolute;
top: 100%;
box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
}
nav ul ul li{float: none; position: relative;}
nav ul ul li a {
padding: 15px 30px;
border-bottom: 1px solid rgba(0,0,0,.05);
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
</style>
How about something like adding the title as a new list item?将标题添加为新列表项之类的事情怎么样?
<li class="title">Title</li>
.title {
display: block;
padding: 30px 20px;
color: #222;
font-size: .9em;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}
.title:hover {
background: rgba(0, 0, 0, 0);
}
The hover here is used to simply override your existing hover, causing the title to not change it's background colour.这里的悬停用于简单地覆盖您现有的悬停,导致标题不会改变它的背景颜色。
I've created a fiddle of this here .我在这里创建了一个小提琴。
Update更新
For getting the title to stick to the left, simply move it one level up in the DOM, so it's outside of the <ul>
, but inside <nav>
.为了让标题保持在左边,只需将它在 DOM 中向上移动一级,这样它就在
<ul>
,但在<nav>
。 Then add float: left;
然后添加
float: left;
to your title
class:到您的
title
类:
.title {
float: left;
}
By moving the title outside of your <ul>
, you actually won't need any of the hover override any more, so you can get rid of:通过将标题移到
<ul>
,您实际上不再需要任何悬停覆盖,因此您可以摆脱:
.title:hover {
background: rgba(0, 0, 0, 0);
}
I've created a new fiddle showcasing this here (note that I've removed some of the undefined links in order to showcase the behaviour with a small window).我在这里创建了一个新的小提琴来展示这一点(请注意,我已经删除了一些未定义的链接,以便用一个小窗口展示行为)。
Hope this helps!希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.