I'm working on a left nav. I want the red bar to appear before menu items when hovering. It works good for the Home item and its sub items but the other root items cause the red bar to span the entire width of the page, from top to bottom, when hovering.
$(document).foundation();.vertical.dropdown.menu [href] > i {
display: block;
}
.vertical.dropdown.menu [href] {
display: block;
text-align: center;
}
.left-bar {
position: fixed;
top: 0;
left: 0;
width: 150px;
height: 100%;
color: #333;
background: #FFFFFF;
}
.left-bar .vertical.menu.nested {
padding: 0;
}
.left-bar [href] > i {
display: block;
}
.left-bar [href] {
display: block;
text-align: left;
padding: 0;
color: #333;
}
.left-bar [href]:hover {
background: #9B9B9BFF;
}
.left-bar .vertical.menu > li {
position: relative;
background: #FFFFFF;
color: #333;
border: 0;
}
.left-bar .top-level-item [href]:hover::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background-color: red;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/js/foundation.min.js"></script>
<ul data-dropdown-menu>
<li >
<a href="#">
<i ></i>
<span>Home</span>
</a>
<ul >
<li><a href="#"><i ></i> Sub Item 1</a></li>
<li><a href="#"><i ></i> Sub Item 2</a></li>
<!-- ... -->
</ul>
</li>
<li >
<a href="#">
<i ></i>
<span>Account</span>
</a>
</li>
<li >
<a href="#">
<i ></i>
<span>Settings</span>
</a>
</li>
<li >
<a href="#">
<i ></i>
<span>Help</span>
</a>
</li>
<!-- ... -->
</ul>How to fix it so that the red bar only spans the height of the menu item?
CodePudding user response：
you have position absolute on top-level-item href before
put position relative on top-level-item instead of the li
.top-level-item {
position: relative;
}
CodePudding user response：
I made a change in CSS, added a comment there.There was issue in CSS selector based on DOM structure
.left-bar.vertical.menu li instead of .left-bar .vertical.menu > li , I removed the space and > , so that all li are now having position relative
$(document).foundation();.vertical.dropdown.menu [href] > i {
display: block;
}
.vertical.dropdown.menu [href] {
display: block;
text-align: center;
}
.left-bar {
position: fixed;
top: 0;
left: 0;
width: 150px;
height: 100%;
color: #333;
background: #FFFFFF;
}
.left-bar .vertical.menu.nested {
padding: 0;
}
.left-bar [href] > i {
display: block;
}
.left-bar [href] {
display: block;
text-align: left;
padding: 0;
color: #333;
}
.left-bar [href]:hover {
background: #9B9B9BFF;
}
/* I made a change here */
.left-bar.vertical.menu li {
position: relative;
background: #FFFFFF;
color: #333;
border: 0;
}
.left-bar .top-level-item [href]:hover::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background-color: red;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/js/foundation.min.js"></script>
<ul data-dropdown-menu>
<li >
<a href="#">
<i ></i>
<span>Home</span>
</a>
<ul >
<li><a href="#"><i ></i> Sub Item 1</a></li>
<li><a href="#"><i ></i> Sub Item 2</a></li>
<!-- ... -->
</ul>
</li>
<li >
<a href="#">
<i ></i>
<span>Account</span>
</a>
</li>
<li >
<a href="#">
<i ></i>
<span>Settings</span>
</a>
</li>
<li >
<a href="#">
<i ></i>
<span>Help</span>
</a>
</li>
<!-- ... -->
</ul>CodePudding user response：
I made a border left for the red; set to white initially.
I made changes:
- Cut out all the CSS not needed including all the position related stuff
- Used classes instead of some
[href]I consider "fragile" - Changed to specific
background-colorto be clear - Set a 0 border, then added the specifics for the left one
- Used
reminstead ofpxsince typical browsers use a16px=1remsize base; and you can force if needed to support those that do not do so.
You can decide on the sub-item if you want the container to continue to have the border and do some things related to that with CSS as here: How to style the parent element when hovering a child element? or perhaps with some simple JavaScript to help.
$(document).foundation();.nav-item {
width: 10rem;
background-color: #FFFFFF;
text-align: center;
color: #333;
border: 0;
border-left-width: 0.25rem;
border-left-style: solid;
border-left-color: #FFFFFF;
}
.nav-item:hover {
border-left-color: #FF0000;
}
.nav-link {
color: #333333;
}
.nav-item .nav-link:hover {
background-color: #9B9B9BFF;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/js/foundation.min.js"></script>
<ul data-dropdown-menu>
<li >
<a href="#">
<i ></i>
<span>Home</span>
</a>
<ul >
<li ><a href="#"><i ></i> Sub Item 1</a></li>
<li ><a href="#"><i ></i> Sub Item 2</a></li>
</ul>
</li>
<li >
<a href="#">
<i ></i>
<span>Account</span>
</a>
</li>
<li >
<a href="#">
<i ></i>
<span>Settings</span>
</a>
</li>
<li >
<a href="#">
<i ></i>
<span>Help</span>
</a>
</li>
</ul>