I got a dropup button on my mobile footer, but the dropup button only opens on hover.
How can I change the code that the dropup menu will be visible only when clicking on it?
<li class="dropup">
<span class="menu-icon fas fa-bars"></span>More
<ul class="dropup-content" style="right: 10px;bottom: 70px">
<li>{lang:"core","usermenu_favorites"}</li>
<li>{lang:"core","usermenu_visitors"}</li>
</ul>
</li>
and the CSS:
.dropup {
position: relative;
display: inline-block;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
bottom: 50px;
z-index: 1;
}
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover {background-color: #ccc}
.dropup:hover .dropup-content {
display: block;
}
.dropup:hover .dropbtn {
background-color: #2980B9;
}
instead of using the css :hover use javascript to add and remove .hover class to the .dropup-content element when the .dropdown-toggle element is touched/clicked.
.dropup-content {
display: none;
/* position: absolute; */
background-color: #f1f1f1;
min-width: 160px;
bottom: 50px;
z-index: 1;
}
.dropup-content.hover {
display: block;
}
Related
To make sure the media query was actually working and the problem not being me setting the wrong max-width, I set the nav bar to change color and height when the max width was reached. My main goal was for the search bar to move further to the left but this doesn't work (the change in background color was for visual purposes). Why is this so? I'm trying to reposition the search bar as it glitches once the screen gets smaller.
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: rgb(255, 255, 255);
display: inline-flex;
height: 35px;
transform: translate(180px, -1px);
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
.search {
background-color: indigo;
}
}
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>
Your media query is working as expected: The background-colors are applied and the height is set. The background-color for .search wasn't so good visible because the search input has a width: 0px - therefor i tested with 50px. The change of the height wasn't visible because everything was white - therefor i tested with:
nav {
background-color: #ccc;
}
Now you can see that on big screens the nav has no height (= auto) and on small screens 40px (use the browsers dev tools).
Working example:
nav {
background-color: #ccc;
}
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: lightcoral;
display: inline-flex;
height: 35px;
transform: translate(180px, -1px);
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
.search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
.search {
background-color: indigo;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>
Alternative example:
with display: flex for the whole nav container and deactivated transform for the ul in the media query
nav {
display: flex;
justify-content: space-between;
background-color: #ccc;
}
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: lightcoral;
display: inline-flex;
height: 35px;
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
.search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
nav ul {
transform: none;
}
.search {
background-color: indigo;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>
If it is not working for all the div's, check if you forgot to put <meta content="width=device-width, initial-scale=1" name="viewport" /> inside your <head> </head> tags where you have your HTML code. This should do the trick.
I've been working on a navigation bar. I've got it styled the way I like, but for some reason am having issues getting submenus to work.
The code looks like:
<div id="head">
<input id="toggle" type="checkbox">
<label for="toggle" class="icon">
<div><!-- --></div>
<div><!-- --></div>
<div><!-- --></div>
</label>
<div id="nav">
<div>
<ul>
<li class="page_item page-item-8">Home</li>
<li class="page_item page-item-10 page_item_has_children">About
<ul class="children">
<li class="page_item page-item-22 page_item_has_children">Once More
<ul class="children">
<li class="page_item page-item-23 page_item_has_children">Another Sub Page
<ul class="children">
<li class="page_item page-item-25">Final Link</li>
<li class="page_item page-item-24">Something Else</li>
</ul>
</li>
</ul>
</li>
<li class="page_item page-item-21">Another Page</li>
<li class="page_item page-item-20">Subpage</li>
</ul>
</li>
<li class="page_item page-item-13 current_page_item">Shop</li>
<li class="page_item page-item-9">FAQ</li>
<li class="page_item page-item-11">Contact</li>
</ul>
</div>
</div>
</div>
The CSS looks like:
/* Toggle */
#toggle {
display: none;
}
/* Nav */
#nav li.current_page_item a {
background: #d2b48c;
border-radius: 40px;
color: #260f03;
}
#nav li a {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
color: #fff;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 14px;
letter-spacing: 4px;
margin: 20px;
padding: 10px 10px 10px 15px;
text-decoration: none;
text-transform: uppercase;
}
/* Media */
#media screen and (max-width: 600px) {
/* Icon */
.icon {
background: #260f03;
margin: 0 auto;
padding: 20px 20px 30px;
position: absolute;
width: 100%;
z-index: 500;
}
.icon div {
background: #d2b48c;
border-radius: 3px;
height: 2px;
margin: 10px auto 0;
position: relative;
transition: all 0.3s ease-in-out;
width: 3em;
}
/* Toggle */
#toggle:checked + .icon div:nth-child(1) {
margin-top: 25px;
transform: rotate(-45deg);
}
#toggle:checked + .icon div:nth-child(2) {
margin-top: -2px;
transform: rotate(45deg);
}
#toggle:checked + .icon div:nth-child(3) {
opacity: 0;
transform: rotate(45deg);
}
#toggle:checked + .icon + #nav {
top: 0;
transform: scale(1);
}
/* Nav */
#nav {
background: rgba(38, 15, 3, 0.95);
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: -100%;
transform: scale(0);
transition: all 0.3s ease-in-out;
z-index: 200;
}
#nav div {
height: 100%;
overflow: hidden;
overflow-y: auto;
position: relative;
}
#nav ul {
padding-top: 90px;
text-align: center;
}
#nav li a:before {
background: #fff;
content: '';
height: 0;
left: -0.5em;
position: absolute;
transition: all 0.2s ease-in-out;
width: 0.25em;
}
#nav li a:hover:before {
height: 100%;
}
}
#media screen and (min-width: 601px) {
/* HIDE the dropdown */
#nav li ul { display: none; }
/* DISPLAY the dropdown */
#nav li:hover > ul {
display: block;
position: absolute;
}
/* Nav */
#nav ul {
background: #260f03;
font-size: 0;
text-align: center;
}
#nav li {
display: inline;
}
#nav li a:hover {
border-bottom: 1px solid #d2b48c;
border-top: 1px solid #d2b48c;
}
}
JS Fiddle (with submenus):https://jsfiddle.net/2v8zhL3e/1/
JS Fiddle (without submenus): https://jsfiddle.net/b0mj7gp4/
I've found a bunch of tutorials on how to do this, but they are all using a float on the li.
I did have a go at it...
I hid the dropdown: #nav li ul { display: none; }
Then I showed it on hover:
#nav li:hover > ul {
display: block;
position: absolute;
}
Which kind of works...but the links show to the left of the main navigation item, I'd like to just tweak this so the links are stacked and show centered under their corresponding header.
I feel like I'm close, can anyone point me in the right direction?
Thanks,
Josh
You can add display: flex to the li:hover ul, then make the flex-direction: column and make the non-hover event position: absolute, left: 0. This creates an issue with the ul child element floating to the far left. So to fix this issue, you need to style its parent to have a relative position. The following should do the trick.
#nav li {
position: relative;
}
#nav li ul {
left: 0;
position: absolute;
}
#nav li:hover > ul {
display: flex;
flex-direction: column;
}
You haven't position: relative in li.
And, it would be better to use position: absolute without hover, in default.
#nav li {
position: relative;
}
#nav li > ul {
position: absolute;
display: none;
}
#nav li:hover > ul {
display: block;
}
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'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.