I have created a small drop down menu.. the issue is I don't want it to be a 200px button link unless it needs to in order to make the text fit. example where it says drop downlink that will be a dynamic link if register has 7 letters but drop downlink has 12 I don't want register to be 200px wide.
<ul class="tactical-nav-isolate">
<li>Register</li>
<li>Login</li>
<li class="account-dropdown">
Dropdown Link<span class="glyphicon glyphicon-menu-down account-dropdown-icon"></span>
<ul class="account-dropdown-nav">
<li>My Profile</li>
<li>My Account</li>
<li>Logout</li>
</ul>
</li>
</ul>
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.tactical-nav-isolate {
text-align: center;
}
.account-dropdown-nav {
background: #000000;
text-align: left;
text-indent: 15px;
}
.tactical-nav-isolate {
float: right;
margin-top: 0px;
border-left: solid 1px #1e2a36;
}
.tactical-nav-isolate > li {
float: left;
border-left: solid 1px #1e2a36;
}
.tactical-nav-isolate li:first-child {
border-left: none;
}
.tactical-nav-isolate a {
color: #fff;
display: block;
line-height: 50px;
width: 200px;
text-decoration: none;
}
.account-dropdown {
position: relative;
}
.account-dropdown:after {
font-size: .5em;
display: block;
position: absolute;
top: 38%;
right: 12%;
}
.account-dropdown-icon {
text-indent: 5px;
}
.account-dropdown-nav {
position: absolute;
display: none;
}
.account-dropdown-nav li {
border-bottom: 1px solid rgba(255,255,255,.2);
}
.account-dropdown:hover > .account-dropdown-nav {
display: block;
background-image: url(../../media/opacityBG.png);
}
I am not one hundred percent sure what you are asking for, but if your question pertains to having a non-uniform width that fits your <a> tags then all you would need to do is uncomment the following:
.tactical-nav-isolate a {
//display: block;
}
look at this to see the difference between block and inline elements:
Related
I am trying to make a dropdown box with submenus appearing horizontally, which can also scroll vertically.
I have gotten everything working except for the scroll.
.dropdown-container {
background: white;
border: 1px solid #666;
cursor: pointer;
line-height: 24px;
height: 24px;
position: relative;
width: 150px;
}
.dropdown-container a {
color: black;
padding: 0 10px;
text-decoration: none;
}
.dropdown-container:after {
color: #666;
content: '\f107';
font-family: FontAwesome;
position: absolute;
right: 2px;
top: 0px;
}
.dropdown-container:before {
content: attr(data-content);
padding: 0 10px;
}
.dropdown-container li > a:not(:only-child):after {
content: '\f105';
font-family: FontAwesome;
position: absolute;
right: 4px;
top: 0px;
}
.dropdown-container ul {
background: white;
border: 1px solid #666;
display: none;
right: 1px; /*Why is it being nudged 1px right relative to parent?*/
list-style: none;
margin: 0;
max-height: 80px;
overflow-x: visible;
overflow-y: auto; /*This is the problematic line, remove this and the rest works*/
padding: 0;
position: relative;
width: 100%;
}
.dropdown-container:hover > ul {
display: block;
}
.dropdown-container ul li {
background: white;
position: relative;
}
.dropdown-container ul li:hover {
background: rgba(173, 216, 230, 0.6);
}
.dropdown-container ul li:hover > ul {
display: block;
}
.dropdown-container ul ul {
display: none;
position: absolute;
left: 150px;
width: 150px;
top: -1px; /*Another 1px adjustment required, why aren't they already aligned?*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="dropdown-container" role="nav" data-content="Title">
<ul class="dropdown">
<li>
Select 1
</li>
<li>
Select 2
<ul>
<li>
Select 2.1
<ul>
<li>
Select 2.1.1
</li>
</ul>
</li>
<li>
Select 2.2
</li>
</ul>
</li>
<li>
Select 3
</li>
<li>
Select 4
</li>
</ul>
</div>
See JSfiddle here.
But if I set overflow-y on the <ul> to auto to enable scrolling then my submenus get hidden as in the snippet above.
I believe the problem is the same as in this question: when overflow-y: auto and overflow-x: visible, overflow-x is treated as auto too.
Unfortunately the solution suggested (wrapping the <ul> in a position: relative element) has not worked for me.
Does anyone know of another way around this?
I am learning CSS while writing CSS I got some issue.
I need to remove this space from my displaying web page.
.grouping:before,
.grouping:after {
content: " ";
display: table;
}
.grouping:after {
clear: both;
}
nav {
background-color: white;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
nav figure {
position: absolute;
}
img {
width: 100px;
}
.primary-nav {
float: right;
}
.primary-nav>li {
display: block;
float: left;
}
.primary-nav>li>a {
float: left;
padding: 25px 0;
width: 100px;
border-left: 1px solid;
}
nav li a {
font-family: Arial, Helvetica, sans-serif;
color: black;
text-transform: uppercase;
font-size: 15px;
text-align: center;
}
nav li:first-child a {
border-left: none;
}
nav li a:focus,
nav li a:hover {
background: red;
background-color: red;
}
body {
background-color: grey;
}
<nav class="grouping">
<figure>
<img src="images/logo.png" alt="LOGO">
<ul class="primary-nav">
<li>Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
</figure>
</nav>
Using this code resultant output must be like this:
Expected Result Image
But getting this result with spaces at corner indicated as an arrow in next image:
Generated Result Image
1) There is some margin on ul element rendered by the browser defaults in general, to fix this do:
ul {
margin: 0
}
2) Also figure element has default margins
figure {
margin: 0
}
Try to inspect the output of the browser to see exactly how the browser defaults renders that margin to see it better.
https://jsfiddle.net/t8netg8j/4/
I would use display: inline-block for the image and the li elements, erase some of the floats and reset some of the margins to 0 as shown below:
(note: I reduced the width of the elements from 100 to 80 px to fit them into the narrow snippet window, but of course you don't have to do that for a wider viewport)
(note #2: i added empty HTML comments at line ends and beginnings for all li elements to avoid the whitespace resulting from the use of inline-blocks which would cause the hover background not to fill the full space between two vertical borders)
html, body {
margin: 0;
}
nav figure {
position: absolute;
width: 100%;
margin: 0;
}
img {
width: 80px;
display: inline-block;
}
.primary-nav {
float: right;
margin: 0;
}
.primary-nav>li {
display: inline-block;
}
.primary-nav>li>a {
float: left;
padding: 25px 0;
width: 80px;
border-left: 1px solid;
}
nav li a {
font-family: Arial, Helvetica, sans-serif;
color: black;
text-transform: uppercase;
font-size: 15px;
text-align: center;
}
nav li:first-child a {
border-left: none;
}
nav li a:focus,
nav li a:hover {
background: red;
background-color: red;
}
body {
background-color: grey;
}
<nav class="grouping">
<figure>
<img src="images/logo.png" alt="LOGO">
<ul class="primary-nav">
<li>Home</li><!--
--><li>Home2</li><!--
--><li>Home3</li><!--
--><li>Home4</li><!--
--><li>Home5</li><!--
--></ul>
</figure>
</nav>
I'm trying to do a nav menu in a particular style, It needs to be a bunch of square buttons/list items, then when you hover over an item, the background behind the item changes color, a decent height above the item and behind the drop down list, as seen in the image below.
My issue is that Im curious if I'm doing it the most efficient way and also when I hover over the initial item, it is working but then you go to one of the drop down items and the main/parent item disappears into the background.
Code:
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
padding-top: 100px;
padding-left: 100px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
border: solid 4px #fff;
width: 150px;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
}
li a:hover {
color: #fff;
border: solid 4px #00ee98;
border-top: solid 100px #00ee98;
margin-top: -100px;
}
.droplinks {
position: absolute;
background-color: #00aeef;
min-width: 150px;
display: none;
margin-left: -2px;
}
.droplinks a {
padding: 10px;
display: block;
border: solid 2px #00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li>Home
</li>
<li class="dropbutton">Products
<div class="droplinks">
Widgets
Cogs
Gears
</div>
</li>
<li class="dropbutton">
Services
<div class="droplinks">
Handshakes
Winks
Smiles
</div>
</li>
<li>Shop
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
Then on hovering a menu item, it changes to this;
However, when I then go to a sub menu item the top level item messes up as in the example above. Would could be done to resolve this?
take a look at this fiddle,
and here is how you can properly show the sub menu on hovering on menu item:
li:hover .droplinks{
display: block;
}
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
text-align:center;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
vertical-align: middle;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
width: 150px;
position: relative;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
border-width: 30px 5px;
border-color: #fff;
border-style: solid;
}
li:hover a {
color: #fff;
border-color:#00ee98;
}
.droplinks {
background-color: #00aeef;
top: 100%;
display: none;
margin-left: 0;
min-width: 150px;
position: absolute;
margin-top: -15px;
}
.droplinks a {
padding: 10px;
display: block;
border-width: 2px 4px;
border-style: solid;
border-color:#00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li>Home
</li>
<li class="dropbutton">Products
<div class="droplinks">
Widgets
Cogs
Gears
</div>
</li>
<li class="dropbutton">
Services
<div class="droplinks">
Handshakes
Winks
Smiles
</div>
</li>
<li>Shop
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
I'm just trying to connect some dots with an ordered list but I cannot make it work. I want to turn on a segment according to the active class and additionally I want to add the name of the student between the segment like this picture
Then I can switch to turn on the other segment with the class active.
This is what I've been trying to do.
jsfiddle
UPDATE
I updated my fiddle because I forgot to add the class active to the li element
UPDATE
I updated again my fiddle to show where I should go the name of the person.
ol.timetable li {
min-width: 25%;
}
.timetable {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.timetable li {
float: left;
text-align: center;
position: relative;
}
.timetable .date {
display: block;
vertical-align: bottom;
text-align: center;
margin-bottom: 1em;
color: #2B2B2B;
}
.timetable .dot {
color: black;
border: 3px solid #B2B2B2;
background-color: #B2B2B2;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 2;
}
.timetable .active .date,
.timetable .active .dot span {
color: black;
}
.timetable .dot:before {
content: "";
display: block;
background-color: #B2B2B2;
height: 0.4em;
width: 50%;
position: absolute;
bottom: 0.9em;
left: 0;
z-index: 1;
}
.timetable .dot:after {
content: "";
display: block;
background-color: #B2B2B2;
height: 0.4em;
width: 50%;
position: absolute;
bottom: 0.9em;
right: 0;
z-index: 1;
}
.timetable li:first-child .dot:before {
display: none;
}
.timetable li:first-child .dot:after .active {
border: 3px solid #F26227 !important;
background-color: #F26227 !important;
}
.timetable li:last-of-type .dot:after {
display: none;
}
.timetable .active .dot {
border: 3px solid #F26227;
background-color: #F26227;
}
.timetable .active .dot:before,
.timetable .active .dot:before {
background-color: #F26227;
}
<ol class='timetable'>
<li class="active">
<span class='date'>5/26/2017</span>
<span class='active dot'>
<span>
</span>
</span>
</li>
<li class="active">
<span class='date'>5/29/2017</span>
<span class='active dot'>
<span></span>
</span>
</li>
<li>
<span class='date'>6/5/2017</span>
<span class='dot'>
<span></span>
</span>
</li>
</ol>
To simplify how much CSS you need to write, I'd suggest making each line segment composed of just one long :before pseudo-element, rather than a combination of a :before and :after. This also makes it simpler to fill in the preceding line segment when the associated item is active.
For placement of the label, I'm going to assume you'll be adding/removing the <span> containing it dynamically, so it'll be up to you to determine where it should be best placed. To position and center it accordingly, I suggest absolute positioning and a small transformation to center the text.
Putting this all together, you get:
ol.timetable li {
min-width: 25%;
}
.timetable {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.timetable li {
float: left;
text-align: center;
position: relative;
}
.timetable .date {
display: block;
vertical-align: bottom;
text-align: center;
margin-bottom: 1em;
color: #2B2B2B;
}
.timetable .dot {
color: black;
border: 3px solid #B2B2B2;
background-color: #B2B2B2;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 2;
}
.timetable .active .date,
.timetable .active .dot span {
color: black;
}
.timetable .dot:before {
content: "";
display: block;
background-color: #B2B2B2;
height: 0.4em;
width: 100%;
position: absolute;
bottom: 0.9em;
left: -50%;
z-index: 1;
}
.timetable li:first-child .dot:before {
display: none;
}
.timetable .active .dot {
border: 3px solid #F26227;
background-color: #F26227;
}
.timetable .active + .active .dot:before {
background-color: #F26227;
}
.timetable li > span:nth-child(3){
position:absolute;
right:0;
bottom:-15px;
transform: translateX(50%);
}
<ol class='timetable'>
<li class="active">
<span class='date'>5/26/2017</span>
<span class='active dot'>
<span>
</span>
</span>
<span>John Doe</span>
</li>
<li class="active">
<span class='date'>5/29/2017</span>
<span class='active dot'>
<span></span>
</span>
</li>
<li>
<span class='date'>6/5/2017</span>
<span class='dot'>
<span></span>
</span>
</li>
</ol>
Note that if the label element isn't guaranteed to be in the same place within the item, I'd suggest adding a class to it to make it easier to target with CSS. Also, if you'd like to hide any unfilled lines behind the active dots, just set the z-index on .timetable .dot:before to a negative value.
Also note the usage of the sibling selector in .timetable .active + .active .dot:before. This ensures that only the line between two active dots will be highlighted, rather than every line associated with an active item.
Hope this helps! Let me know if you have any questions.
Ok so below is a representation and description of what I am trying to achieve.
I am trying to add a navigation on the same line but after an hr tag so that the outcome is something like this...
----------------------------------------------------------------------------- Home Services Facilities About Contact
The best I can do shows one of the nav links but the others are not rendered
HTML
<ul>
<li class="active">HOME</li>
<li>SERVICES</li>
<li>FACILITIES</li>
<li>WITH US</li>
<li>CONTACT</li>
</ul>
</div>
css
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #FFF;
}
.divider {
margin-top: 100px;
text-align: right;
position: relative;
}
.divider hr {
position: absolute;
z-index: 1;
width: 100%;
}
.divider ul {
float: right;
}
.divider li {
float: left;
}
.divider a {
position: absolute;
right: 0px;
top: 0px;
text-decoration: none;
color: #68C5DE;
background: #fff;
z-index: 10;
padding: 2px 20px;
}
jsfiddle
I think I may have over or under complicated things but this has left me scratching my head for 4 hours now.
Is this possible to achieve this in a way that still enables percentiles on the hr?
Any help would be much appreciated.
You have placed all links on top of each other with
.divider a {
position: absolute;
}
If the background isn't an issue then you can use a pseudo element :before to create the line then have the list items overlap it with a white background color to hide it.
HTML
<div class="nav-wrapper">
<ul class="navigation">
<li class="active">HOME</li>
<li>SERVICES</li>
<li>FACILITIES</li>
<li>WITH US</li>
<li>CONTACT</li>
</ul>
</div>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #FFF;
}
.nav-wrapper { margin-top: 50px; overflow: hidden; position: relative; }
.navigation {
float: right;
margin: 0;
padding: 0;
}
.navigation:before {
border: solid 1px #000;
content: '';
height: 0;
left: 0;
position: absolute;
top: 0.5em;
width: 100%;
}
.navigation li {
background-color: #fff;
float: left;
height: 1em;
line-height: 1em;
list-style-type: none;
margin: 0;
padding: 0 5px;
position: relative;
}
jsfiddle