Bootstrap3:在垂直导航栏中重叠的下拉项目
在Bootstrap中遇到垂直导航栏的问题。Bootstrap3:在垂直导航栏中重叠的下拉项目
查看代码笔在这里:link
注意的“作品”部分是如何呈现向下传统的降?我希望它能顺利地与导航内联,而不是弹出到包含其他项目的下拉菜单中。我已经把这件事弄了个小时。我确定它与位置,显示或默认引导属性有关。
要澄清,我在寻找a UI like this子菜单。了解“作品”部分如何将其下方的菜单项按下?
有什么建议吗?
HTML
<ul class="nav items">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Works <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">DASHBOARD</a>
</li>
<li>
<a href="#">DASHBOARD</a>
</li>
</ul>
</li>
<li><span></span>Dashboards </li>
<li><span></span>Game Finder</li>
<li><span></span>Channel</li>
<li><span></span>My Profile</li>
</ul>
</nav>
<div id="pagewrapper">
<div id="hamburger">
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>
<div class="navbar navbar-fixed-top">
<div class "container">
<a class="pull-right" href="#">
<img src="" alt="logo" /></a>
</div>
</div>
</div>
CSS
.navbar {
background-color: #33669a;
box-shadow: 1px 2px 2.82px 0.18px rgba(0, 0, 0, 0.24);
height: 58px;
padding: 7px 40px 7px 0;
}
#page-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-colour: rgba 0, 0, 0, 0.2;
}
#title {
color: #fafafa;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
}
#hamburger {
position: fixed;
z-index: 5000;
top: 15px;
left: 15px;
cursor: pointer;
transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#hamburger div {
width: 35px;
height: 2px;
margin-bottom: 8px;
background-color: #00DFFC;
transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;
}
#hamburger.active {
left: 230px;
}
#hamburger.active div {
background-color: #343838;
z-index: 5000;
}
#hamburger.active #top {
transform: translateY(10px) rotate(-135deg);
}
#hamburger.active #middle {
opacity: 0;
/* transform: rotate(135deg); */
}
#hamburger.active #bottom {
transform: translateY(-10px) rotate(-45deg);
}
#sidebar {
position: fixed;
overflow: auto;
top: 0px;
left: -275px;
width: 275px;
opacity: 0;
padding: 0px 0px;
height: 100%;
background-color: #fafafa;
color: #343838;
transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
z-index: 1500;
box-shadow: 14px 24px 37.6px 2.4px rgba(0, 0, 0, 0.24);
list-style: none;
}
#sidebar.active {
left: 0px;
opacity: 1;
}
.items {
position: relative;
top: 140px;
transform: translateY(-50%);
}
.items li {
position: relative;
display: inline-block;
cursor: pointer;
font-family: Roboto;
color: rgba(0, 0, 0, 0.87);
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding: 15px 30px;
transition: all 250ms;
width: 100%;
}
.items li:hover {
padding: 15px 45px;
background-color: rgba(52, 56, 56, 0.2);
}
.items li:hover a {
display: block;
}
.sidebar-head {
background-color: #33669a;
width: 100%;
height: 144px;
}
.sidebar-img {
display: block;
border-radius: 50%;
background-color: #e0e0e0;
width: 56px;
height: 56px;
overflow: hidden;
position: absolute;
left: 23px;
top: 24px;
}
.sidebar-img img {
height: 100%;
margin: 0 auto;
}
.username {
font-family: Roboto;
color: #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 24px;
text-align: left;
position: absolute;
left: 23px;
top: 100px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}
我假设你不想要'Works'选项卡背景中的哈希颜色。 有引导的风格,做:
.nav>li>a:hover, .nav>li>a:focus{
text-decoration: none;
background-color: #eee;
}
现在覆盖的背景颜色在你的CSS文件一样,
.nav>li>a:hover, .nav>li>a:focus{
text-decoration: none;
background-color: transparent !important;
}
如果你想删除然后跳舞效果:
.items li:hover {
/* padding: 15px 45px; */
}
覆盖此并在index.html中评论填充。
这不是填充。我在上面的编辑中澄清过。 – Neeks
根据我的理解,代码笔中的“联盟选择器”按照bootsnip工作(现在下拉选项)。你现在确切的期望是什么? –
它是从引导采摘财产
.nav>li>a{position:relative;display:block;padding:10px 15px}
添加
.nav>li>a{position:relative;display:block;padding:1px 1px !important}
到自己的style.css覆盖引导
这不是填充。我在上面的编辑中澄清过。 – Neeks
你试过我的代码吗?我在你的网站上测试过,它工作正常。 –
我认为这个问题是关于''的一个padding' '标签。只是删除它将是顺利和内联 –