I'm creating a vertical menu that can have submenus. For these, I'm trying to add a vertical line with the use of CSS pseudo-element ::before and border.
The issue that I'm facing is that CSS is being applied to the entire menu instead of the specific submenu.
I think the issue lies with the use of position: absolute;, but without it, the border is never displayed.
Below is the code and you can check the issue in this JsFiddle.
<ul id="test-ul">
<li><a>one</a></li>
<li>
<a>two</a>
<ul class="submenu">
<li><a>sub one</a></li>
<li><a>sub two</a></li>
<li><a>sub three</a></li>
</ul>
</li>
<li><a>three</a></li>
<li><a>four</a></li>
<li><a>five</a></li>
</ul>
<style>
/* reset defaults */
ul { list-style: none; }
/* apply style to menu */
#test-ul {
background-color: #eee;
border-color: #ccc;
position: absolute;
}
/* style links */
#test-ul > li a {
color: #2b7dbc;
border-top-color: #e4e4e4;
background-color: #fff;
display: block;
padding: 7px 0 9px 20px;
border-top-width: 1px;
border-top-style: dotted;
}
/* do CSS3 magic and show a vertical border on the left of each submenu item */
#test-ul > li > ul::before {
content: "";
display: block;
position: absolute;
z-index: 1;
left: 18px;
top: 0;
bottom: 0;
border: 1px dotted;
border-width: 0 0 0 1px;
}
</style>
Simply give .submenu a position of relative
.submenu{
position: relative;
}
Related
Is this possible in css? I have found example of tabs which has background color. But none with plain borders that has border radius!
https://www.loom.com/i/23516b83849a4c1e87129b8d8bf1fd4f
You can achieve this by using additional elements (such as the before and after pseudo elements) to create borders on the top or bottom half of each tab.
Here is an example that uses the before element of each tab to create a border on the top half of the active tab, and a border on the bottom half of the inactive tabs. Then it uses the after element of the first and last tabs to complete the ends.
nav {
padding: 10px;
--border-width: 2px;
--border: var(--border-width) solid;
--border-radius: 10px;
}
nav a {
/* capture before/after elements within tab */
position: relative;
padding: 5px 10px;
/* add a negative margin so the tabs join borders */
/* alternatively, you could make the before/after elements a little larger than the tab */
margin: 0 calc(var(--border-width) / -2);
cursor: pointer;
}
/* use before element as a floating border for either the top half or the bottom half */
nav a:before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 50%;
border: var(--border);
}
nav a.active:before {
top: 0;
border-bottom: none;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
nav a:not(.active):before {
top: 50%;
border-top: none;
border-left: none;
border-right: none;
}
/* use after element as floating border for the ends of the tab group */
nav a:first-child:after,
nav a:last-child:after {
content: '';
position: absolute;
bottom: 0;
height: 50%;
width: var(--border-radius);
border-bottom: var(--border);
margin: calc(var(--border-width) / -1);
}
nav a:first-child:after {
right: 100%;
}
nav a:last-child:after {
left: 100%;
}
nav a.left-of-active:before,
nav a.active:first-child:after {
border-right: var(--border);
border-bottom-right-radius: var(--border-radius);
}
nav a.right-of-active:before,
nav a.active:last-child:after {
border-left: var(--border);
border-bottom-left-radius: var(--border-radius);
}
<nav>
<a class="active">
Page 1
</a>
<a class="right-of-active">
Page 2
</a>
<a>
Page 3
</a>
</nav>
<nav>
<a class="left-of-active">
Page 1
</a>
<a class="active">
Page 2
</a>
<a class="right-of-active">
Page 3
</a>
</nav>
<nav>
<a>
Page 1
</a>
<a class="left-of-active">
Page 2
</a>
<a class="active">
Page 3
</a>
</nav>
For example I have fixed nav, is there a way to anchor the list items to the bottom of the nav? I attempted to give the list items a fixed position too but this messes up their layout as you can see at fiddle
here is my code:
#nav {
height: 75px;
width: 100%;
position: fixed;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav>ul {
list-style: none;
margin: 0;
}
#nav>ul>li {
display: inline;
/*these two lines were my attempt at anchoring the list items to the bottom f the #nav, but it throws everything out of wack*/
position: fixed;
top: 45px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
Any suggestions on how this can be done?
When you use a fixed or absolute position it takes an element out of the flow of the document and hence they stack up on top of each other when you apply those positions to the li elements.
Instead you should be absolutely positioning the ul block to the bottom of the #nav:
#nav > ul {
list-style: none;
margin: 0;
position: absolute;
bottom: 0;
}
#nav > ul>li {
display: inline;
}
As I understand your question, you wish to have the list elements at the bottom of your header. Just change position: fixed; to position: relative;. This keeps the elements flow along with the flow of the page.
Here is your solution:
#nav{
height: 75px;
width: 100%;
position: fixed;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav > ul{
list-style: none;
margin: 0;
}
#nav > ul>li{
display:inline;
/*these two lines were my attempt at anchoring the list items to the bottom f the #nav, but it throws everything out of wack*/
position: relative;
top:50px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
If you want something to be anchored to the bottom of an element, but still remain in the flow of the page, try using relative positioning. That essentially means you give the #nav element relative positioning, and you give the li elements relative positioning as well:
#nav {
height: 75px;
width: 100%;
position: relative;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav>ul {
list-style: none;
margin: 0;
}
#nav ul li {
display: inline;
position: relative;
top: 45px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
This seems to work pretty well, please tell me if it doesn't.
The problem you encountered was that fixed positioning put them all in a mess. Fixed positioning positions ALL the items relative to the viewport, so if you had all the lis with
position: fixed;
top: 45px;
They would all go in the same spot.
I am trying to get a left menu and a right banner and have them stay fixed in place when the centre panel scrolls text - the banner will have to be on top of the centre panel due to size - the colour scheme is white text on black background except for the menu which is an <ul> with its own colour scheme
I am rather new to css so may have already made a prat of myself - I have tried but currently the top right banner does stay fixed when scrolling but the text overlays it and the top left menu shoots off the screen
JS Fiddle
<head>
<style>
#container {
width:90%;
height 100%;
background-color:Black;
margin: 0 auto;
text- align: left;
}
#banner {
float: right;
background-color:black;
width:40%;
top:1;
right:1;
position:fixed
}
#sidebarmenu {
float: left;
width: 10%;
background-color:Black;
padding: 15px 10px 15px 20px;
top:1;
left:1;
position:fixed
}
#mainContent {
background-color: Black;
color:White;
position: absolute;
left: 120px;
width: 50%;
top:220;
margin: 0 0 0 15%;
}
body {
color: white;
background-color: black;
}
.sidebarmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px;
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li a {
display: block;
overflow: auto;
color: black;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
background-color: #c0c0c0;
}
.sidebarmenu ul li a:visited {
color: white;
}
.sidebarmenu ul li a:hover {
background-color: black;
color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="banner" ><img style="float:right" alt="logo text" src="/banner.png" /></div>
<div id="mainContent" >TEXT</div>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>Home</li>
<li>Info</li>
<li>Contact Us</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</div>
</div>
</body>
any help /comments / guidance on what I should be learning /looking at is appreciated
Phew! Where to start? lol Your code needed to be fixed pretty much on every line. I have a reworked demo here but basically, you must pay attention to site architecture when you are positioning elements. Organization is everything is front end development.
See DEMO
First of all, once you start using position: absolute; or position: fixed;, using float and margin becomes irrelevant.
Also, when using top: x;, left: x;, right: x;, or bottom: x; always make sure to add a size unit to your value, i.e. top:1; should be top: 1px;
If I understood correctly from the css you posted, something that'll get you closer to what you want to achieve is this:
html,body{ margin: 0; padding: 0; color: #fff; background: #000; height: 100%; width: 100%; overflow: hidden; }
#container { width:100%; height: 100%; text-align: left; overflow: auto; border: 1px red solid;}
#mainContent { width: 90%; color: #fff; margin: 0 auto; }
#banner { background-color: #000; width:40%; top:1px; right:1px; position:fixed; }
#sidebarmenu { width: 10%; background: #000; padding: 15px 10px 15px 20px;top:1px;left:1px;position:fixed; }
Take a look at this jsfiddle I made to see what this css does: http://jsfiddle.net/beYuC/
NOTE: You might have noticed I made the html and body have a height of 100%. This is because unless you set a height for the html and body, any other element on the page you want to make 100% will simply be flattened out.
NOTE 2: Be sure to check out this website and its CSS for an example of a well done content container and sidebar menu with 100% height: http://www.jlescure.com/
I would like to diplay three horizontal contents. The horizontal contents are following.
1) Logo at the left side. It has been done
2) Menu bar with menus and sub menus with some basic css class.
3) Google map
These three contents should be placed fixed height for all the browsers. So I have set fixed height for these three horizontal div contents. But SubMenu of Menu bar are not showing up. Because, of my fixed div content (which is present in the middle). I dont know how to fix it. Any help is much appreciated. My code are below.
**//Content ONE**
<div id="HeadContainer" style="height: 62px;">
<div id="logoHolder" style="float: left;">
<img src="logo/image.gif" alt="Company Logo" />
</div>
</div>
<hr />**//Content TWO**
<div id="menubar" style="height: 28px;">
<ul class="dropdown">
<li>Draw Region
<ul class="sub_menu">
<li>Add New Region
<ul>
<li>Polygon Tool
</li>
<li>Rectangle Tool
</li>
<li>Circle Tool
</li>
</ul>
</li>
<li>Stop Drawing Region
</li>
</ul>
</li>
<li> Edit Region
</li>
<li>Remove Region
</li>
</ul>
</div>
<hr />**//Content THREE**
<div id="map-canvas" style="height: 400px"></div>
<hr />
CSS I have used for menu bar is following
I have not coded the following. I just copied the script from the net. But it is good nothing problem in it.
ul.dropdown {
position: relative;
}
ul.dropdown li {
font-weight: bold;
float: left;
zoom: 1;
background: #ccc;
}
ul.dropdown a:hover {
color: #000;
}
ul.dropdown a:active {
color: #ffa500;
}
ul.dropdown li a {
display: block;
padding: 4px 8px;
border-right: 1px solid #333;
color: #222;
}
ul.dropdown li:last-child a {
border-right: none;
}
/* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
background: #F3D673;
color: black;
position: relative;
}
ul.dropdown li.hover a {
color: black;
}
/*
LEVEL TWO
*/
ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.dropdown ul li {
font-weight: normal;
background: #f6f6f6;
color: #000;
border-bottom: 1px solid #ccc;
float: none;
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
border-right: none;
width: 100%;
display: inline-block;
}
/*
LEVEL THREE
*/
ul.dropdown ul ul {
left: 100%;
top: 0;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
The submenu is hidden behind the map, add z-index: 100 to ul.dropdown ul, and it should be in front of it. Check the demo.
All,
I have a horizontal menu bar. When the user hovers over each link in the menu bar, I want to show a small triangle underneath the link.
This small triangle is not an image but is rendered by CSS border syntax. Image and code below:
Here is the CSS code for the triangle:
#css_arrow {
border-color: transparent transparent rgba(111,46,11,0.0) transparent;
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
position: absolute;
top: 34px;
left: 78px;
I want to add the triangle to the menu item in hover state.
Can someone please advise how to go about adding this id to the hover state. I thought about using two classes for the items in the menu bar but its not working out. Here is the html code:
<div id="main_bar">
<ul>
<li class="maintabs maintabs_tri">Overview</li><li class="maintabs maintabs_tri">Collar/ Neckline</li><li class="maintabs maintabs_tri">Sleeves
<ul>
<li class="s_leftright">Left Sleeves</li>
<li class="s_leftright">Right Sleeves</li>
</ul></li><li class="maintabs maintabs_tri">Body</li>
</ul>
</div>
And the CSS, which doesnt work:
.maintabs_tri:hover {
border-color: transparent transparent rgba(111,46,11,1) transparent;
border-style: solid;
border-width: 8px;
position: absolute;
height: 0;
width: 0;
top: 32px;
left: 78px;
}
You are going to need to place it on all items, but only display it on hover, i.e.
<ul>
<li>
Whatever <span></span>
</li>
<li>
Whatever <span></span>
</li>
<li>
Whatever <span></span>
</li>
</ul>
In this case, span is going to be the triangle. I'm assuming you've already styled your ul an li appropriately. So, in your css:
ul li a {
display: block;
width: 100px;
height: 32px;
float: left;
position: relative;
}
ul li a:hover span {
display: block;
}
ul li a span {
display: none;
border-color: transparent transparent rgba(111,46,11,1) transparent;
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
position: absolute;
bottom: 0;
left: 50%;
}
I'm nesting it within the anchor because that maximizes the clickable area.