I tried making a sidenav, and wanted to make it a dropdown menu, but when I stop hovering the main item, the dropdown goes away.
Does anyone know how to solve my problem?
(also a notice, this can't be fixed by clicking the main item instead of hovering, because clicking the main item links to another page).
Here is my code:
/* Style the links inside the sidenav */
#mySidenav a {
position: absolute; /* Position them relative to the browser window */
left: -80px; /* Position them outside of the screen */
transition: 0.3s; /* Add transition on hover */
padding: 15px; /* 15px padding */
width: 100px; /* Set a specific width */
text-decoration: none; /* Remove underline */
font-size: 12px; /* Increase font size */
color: white; /* White text color */
border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}
/* The about link: 20px from the top with a green background */
.Home {
top: 20px;
background-color: #4CAF50;
}
#Home a:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
}
.Info {
top: 80px;
background-color: #2196F3; /* Blue */
}
#Info a:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
}
.Producten {
top: 140px;
background-color: #f44336; /* Red */
}
#Producten a:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
}
#Producten a:hover ~ DropdownGroepstraining {
visibility: visible;
width: 100px;
height: 45px;
}
.DropdownGroepstraining {
top: 185px;
margin-left: 140px;
background-color: #f44336; /* Red */
display: none;
}
.DropdownPrivetraining {
top: 230px;
margin-left: 140px;
background-color: #f44336; /* Red */
display: none;
}
.DropdownTrajectopmaat {
top: 275px;
margin-left: 140px;
background-color: #f44336; /* Red */
display: none;
}
.Trainers {
top: 200px;
background-color: #555 /* Light Black */
}
#Trainers a:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
}
.DropdownPieter {
top: 245px;
margin-left: 140px;
background-color: #555;
display: none;
}
.DropdownLaura {
top: 290px;
margin-left: 140px;
background-color: #555;
display: none;
}
.DropdownYannick {
top: 335px;
margin-left: 140px;
background-color: #555;
display: none;
}
.DropdownSander {
top: 380px;
margin-left: 140px;
background-color: #555;
display: none;
}
.DropdownNick {
top: 425px;
margin-left: 140px;
background-color: #555;
display: none;
}
.Contact {
top: 260px;
background-color: purple;
}
#Contact a:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
}
.DropdownContactform {
top: 305px;
margin-left: 140px;
background-color: purple;
display: none;
}
.DropdownFacebook {
top: 350px;
margin-left: 140px;
background-color: purple;
display: none;
}
.DropdownInsta {
top: 395px;
margin-left: 140px;
background-color: purple;
display: none;
}
.FAQ {
top: 320px;
background-color: rgba(245, 240, 15, 0.7)
}
#FAQ a:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
}
a:hover ~ a {
display: block;
}
<nav>
<div id="mySidenav" class="sidenav">
<div id="Home">Home</div>
<div id="Info">Info</div>
<div id="Producten">Producten
Groepstraining
Privétraining
Traject op maat
</div>
<div id="Trainers">Trainers
Pieter Geerts
Laura Van Baekel
Yannick Maes
Sander Geerts
Nick Van Camp
</div>
<div id="Contact">Contact
Contactformulier
<img id="navfacebooklogo" src="images/facebooklogo.png" />Facebook
<img id="navinstagramlogo" src="images/instagramlogo.png" />Instagram
</div>
<div id="FAQ">FAQ</div>
</div>
</nav>
Does anyone know how to solve my problem?
(also a notice, this can't be fixed by clicking the main item instead of hovering, because clicking the main item links to another page).
Thanks for your time,
Tom
The problem is you are selecting the hover of anchor tag which is sibling of the sub menu.
change your
#Producten a:hover {
to
#Producten:hover a {
This way, you are selecting the hover of the parent, so the menu will be visible when hovering both menu and sub menu
Related
I am trying to make a menu bar open and close from right to left. I have looked at documentation and other posts and have not been able to get it to work.
As you can see the menu is on the right of the screen but opens from the wrong direction, I tried changing it to relative and changing all the values to no avail.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginRight = "0";
}
#import url("https://fonts.googleapis.com/css?family=Nunito+Sans:900");
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-family: "Nunito Sans";
overflow-x: hidden;
font-size: 60px;
}
video{
width: 100vw;
height: 100vh;
object-fit: cover;
top: 0;
left: 0;
}
.header {
position: absolute;
font-size: 130px;
color: #2C3939;
top: 50%;
left: 50%;
transform: translate(-0%, -50%);
}
.header2 {
position: absolute;
z-index: 1;
font-size: 30px;
color: #2C3939;
top: 40%;
left: 61%;
transform: translate(-0%, -50%);
}
/* The sidebar menu */
.sidebar {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 1200px;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
/* The sidebar links */
.sidebar a {
float:right;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: relative;
top: 0;
right: 25px;
font-size: 36px;
margin-right: 50px;
}
/* The button used to open the sidebar */
.openbtn {
position: fixed;
top: 5%;
left: 95%;
transform: translate(-50%, -50%);
font-size: 80px;
cursor: pointer;
color: 2C3939;
padding: 10px 15px;
border: none;
z-index: 1;
}
.openbtn:hover {
background-color: #444;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar a {font-size: 18px;}
}
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="body">
<button class="openbtn" onclick="openNav()">
<img src="assets/SidebarIcon.png" width="26.25" height="43.75">
</button>
</div>
you need to set the container position to absolute, and give it :
right:0
top:0
.sidebar {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
z-index: 1; /* Stay on top */
position: absolute; /* Stay in place */
top: 0;
right: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
replace this with your sidebar class
I created a simple tooltip
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
transition: all 0.5s ease;
}
[tooltip]:hover:before {
opacity: 1;
color: #ffffff;
background: #333333;
padding: 10px;
}
/* ################ */
/* No need for this */
/* ################ */
div {
background: cyan;
margin: 20px;
padding: 10px;
}
body {
background: white;
}
<div tooltip="Tooltip">Div with tooltip</div>
As you can see the tooltip always covers the div content. I want to put the tooltip always at the bottom right side.
I add
bottom: 0;
right: 0;
to the CSS but then the tooltip appears at the bottom of the page. How can I fix this?
Because you first need to set your container position as relative : absolute positioning refers to the last non-static element.
After that, you don't want to use bottom: 0 but top: 100% : using bottom will align the tooltip on the bottom, while top will place it underneath your container.
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
right: 0;
top: 100%;
transition: all 0.5s ease;
}
[tooltip]:hover:before {
opacity: 1;
color: #ffffff;
background: #333333;
padding: 10px;
}
[tooltip] {
position: relative;
}
/* ################ */
/* No need for this */
/* ################ */
div {
background: cyan;
margin: 20px;
padding: 10px;
}
body {
background: white;
}
<div tooltip="Tooltip">Div with tooltip</div>
Simply add position:relative; to the element where the tooltip should be placed in the bottom right;
[tooltip] {
position:relative;
}
[tooltip]:before {
content: attr(tooltip);
position: absolute;
opacity: 0;
transition: all 0.5s ease;
bottom:0;
right:0;
}
[tooltip]:hover:before {
opacity: 1;
color: #ffffff;
background: #333333;
padding: 10px;
}
/* ################ */
/* No need for this */
/* ################ */
div {
background: cyan;
margin: 20px;
padding: 10px;
}
body {
background: white;
}
<div tooltip="Tooltip">Div with tooltip</div>
I am trying to create a Facebook icon using CSS. Using some shape-making-tutorials from internet I was able to design a facebook icon as below:
The created shape is not right. I am trying to get a more polished result like:
I tried modifying the CSS but I was unable to do it properly. The HTML is used is in the following:
#fb-icon {
background: blue;
text-indent: -999em;
width: 120px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid blue;
border-bottom: 0;
}
#fb-icon::before {
content: "/20";
position: absolute;
background: blue;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 40px;
}
#fb-icon::after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #eee;
right: 5px;
}
<div id="fb-icon">
</div>
I want to know where's the problem in the Shape's CSS code. Kindly guide me.
DEMO
<p class="logo">Facebook</p>
.logo {
background: #4661b0; /* make it "Facebook blue" */
text-indent: -999em; /* Back the actual text in the paragraph tag out of the element */
width: 100px; /* Make it nice and big */
height: 110px; /* The tag is 10px larger because of how we're handling the borders below */
border-radius: 3px; /* for that oh so important modern look */
position: relative; /* so we can position our other elements absolutely */
overflow: hidden; /* so we can hide any overflow those elements will have */
border: 15px solid #4661b0; /* so we can make it look like the F is not butting up against the right side of the box */
border-bottom: 0; /* removing the border here though, because the F does touch the bottom of the box */
}
.logo:before {
content: "/20"; /* Psuedo elements need something for content, this means a blank space */
position: absolute; /* So we can position it exactly where we want it */
background: #4661b0; /* make the box the same Facebook blue */
width: 40px; /* setup the right width, which actually extends the box outside of the containing element (along with our positioning below) */
height: 90px; /* this also extends the trunk outside of the main box */
bottom: -30px; /* as mentioned above, we pull the box we're using to create the trunk of the F down to hide some of it, because it will have rounded corners on all sides */
right: -37px; /* similar to what we're doing with bottom above */
border: 20px solid white; /* make the remaining visible border white and thick enough to look right */
border-radius: 25px; /* now give the top right visible corner the necessary curve */
}
.logo:after {
content: "/20"; /* again, pseudo elements need content to be visible */
position: absolute; /* and we're going to want to position absolutely */
width: 55px; /* the desired width of the box to make the bar long enough */
top: 50px; /* set it in the proper location */
height: 20px; /* make it thick enough */
background: white; /* and the right color */
right: 5px; /* then back it up from the edge of the containing block a bit */
}
Source
try this..
change border-radius 40px; to border-radius: 25px; to before element and add this css border-bottom-left-radius: 0;.. to same element
Check out this.. Just change the some value in :after and :before. And width of the box
#fb-icon {
background: blue;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 12px solid blue;
border-bottom: 0;
}
#fb-icon::before {
content: "/20";
position: absolute;
background: blue;
width:29px;
height: 90px;
bottom: -30px;
right: -25px;
border: 20px solid #eee;
border-radius: 28px;
}
#fb-icon::after {
content: "/20";
position: absolute;
width: 56px;
top: 50px;
height: 20px;
background: #eee;
right: 5px;
}
<div id="fb-icon">
</div>
your css needs few changes , just change the width for #fb-icon, border-radius for #fb-icon::before and right for #fb-icon::after , check the changed css
#fb-icon {
background: blue;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid blue;
border-bottom: 0;
}
#fb-icon::before {
content: "/20";
position: absolute;
background: blue;
width:40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 30px;
}
#fb-icon::after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #eee;
right: 2px;
}
check out this link http://jsbin.com/weyebeg/edit?html,css,output
I am making a website that will have multiple pages and each page will potentially be long so at first I wanted a way to have access to menus and stuff in a sidebar. But then I changed my nav so that it isn't fixed any more and so scrolling down the page now looks weird because the toggle is quite low down the page (due to being below the nav at the top of the page). Sow how do I get the toggle, sidebar and content to scroll up to the top of the page and then have both the toggle and sidebar then become fixed as the content side is being scrolled?.
It may be a simple solution but I cant think of how to do it and the only solution I could find was this, which actually looks quite good but is a bit too much for something so little right?
This is what I have at the moment
html,
body {
margin: 0;
padding: 0;
border: 0;
}
a {
display: inline-block;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.5);
border-radius: 0 5px 5px 0;
}
#A,
#B {
position: absolute;
transition: all 700ms;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
background: orange;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
background: green;
}
/*Hide the checkbox*/
#toggle {
display: none;
}
label {
position: relative;
/*Set the left position to the same as the sidebar */
left: 200px;
top: 100px;
margin: 5px;
z-index: 2;
transition: all 700ms;
background: #FFF;
padding: 4px 6px;
background: orange;
}
/* Initial sidebar state */
#toggle ~ #A {
left: 0;
}
/*move both containers on toggle*/
#toggle:checked ~ #A,
#toggle:checked ~ #B {
left: -200px;
}
/*move label to follow sidebar animation*/
#toggle:checked,
#toggle:checked ~ label {
left: 0;
background: #FFF;
}
<div id="A"></div>
<input id="toggle" type="checkbox">
<label for="toggle">menu</label>
<div id="B"></div>
I've made some tooltips for my dot navigation. The are now visible, but I want them to only be visible on hover.
What am I doing wrong?
I've played a bit with display: none and visibility but when I make a code like this:
span.tooltip {
display: none;
}
span.tooltip:hover {
display: block;
}
Nothing happens, they aren't visible at all.
Here's a JSFiddle. http://jsfiddle.net/hEZmE/
HTML
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>
<span class="tooltip">Home</span>
<span class="tooltip">De mogelijkheden</span>
<span class="tooltip">Restauratie</span>
<span class="tooltip">Het proces</span>
<span class="tooltip">Werkplaats</span>
<span class="tooltip">Ambacht en Handwerk</span>
<span class="tooltip">Contact</span>
</nav>
<section id="fbsection1"></section>
<section id="fbsection2"></section>
<section id="fbsection3"></section>
<section id="fbsection4"></section>
<section id="fbsection5"></section>
<section id="fbsection6"></section>
<section id="fbsection7"></section>
CSS
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 9999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 25px 0;
border-radius: 50%;
border: 1px solid #333;
}
.no-touch .cbp-fbscroller > nav a:hover {
background: #333;
}
.cbp-fbscroller > nav a.cbp-fbcurrent {
background: #333;
}
#fbsection1 {
background-color: #ccc;
height: 800px;
}
#fbsection2 {
background-color: #aaa;
height: 800px;
}
#fbsection3 {
background-color: #ccc;
height: 800px;
}
#fbsection4 {
background-color: #aaa;
height: 800px;
}
#fbsection5 {
background-color: #ccc;
height: 800px;
}
#fbsection6 {
background-color: #aaa;
height: 800px;
}
#fbsection7 {
background-color: #ccc;
height: 800px;
}
span.tooltip {
position: absolute;
margin-top: -6px;
margin-left: -120px;
width: 100px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
color: #fff;
background: #333;
}
For one thing, your code doesn't work as is because you've applied your hover event to the tooltip, which is not displayed—you can't hover over something that isn't there (as berentrom pointed out) .
span.tooltip {
display: none;
}
span.tooltip:hover {
display: block;
}
What you're trying to do is show the tooltip when you hover over the dot, so you need to tie the hover event to the dot, and not to the tooltip.
Add this to your CSS:
span.tooltip {
display: none;
}
#cbp-fbscroller a:hover > span.tooltip {
display: block;
}
See here: http://jsfiddle.net/hEZmE/4/