I've been playing around with some navigation effects for a project and I've hit a few problems I'm afraid.
Firstly, the transition timing seems a bit off. My general desire was to have the "tooltip", or link name/label, to slide out when you hover over, and then slide back in when you hover off. The idea was to have the highlight color of the icon (numbers in this case) to appear as though it's simply extending and revealing the word, and then shrinking until it's all gone. I've tried a number of variations of timing and delays, but no luck.
I'm also having issues with getting the span to fill the available space/same height of the link area. I altered the spans color to highlight this discrepancy in area.
Lastly, I've put a longer name for link 5 to demonstrate the limitation/problem with using a fixed/specific width for the span. I don't think there's anyway to achieve all that I'm hoping to as well as having a variable width that depends on the length of the text.
Here is the code I have (CodePen link below):
HTML:
<body>
<div class="navigation navbar-fixed-top">
<div class="navigation container">
<ul class="navigation nav-left">
<li>1<span class="tooltiptext">Welcome</span></li>
<li>2<span class="tooltiptext">Second</span></li>
<li>3<span class="tooltiptext">Third</span></li>
<li>4<span class="tooltiptext">Fourth</span></li>
<li>5<span class="tooltiptext">ExtraLongOneToExposeProblem</span></li>
<li>6<span class="tooltiptext">Sixth</span></li>
</ul>
</div>
</div>
</body>
CSS:
.navigation::after {
clear: both;
}
.navigation::before, .navigation::after {
display: table;
content: " ";
}
.container::after {
clear: both;
}
.container::before, .container::after {
display: table;
content: " ";
}
.navigation {
min-height: 50px;
padding-left: 0;
padding-right: 0;
list-style: none;
z-index: 1;
}
.navigation > li {
display: block;
position: relative;
}
.nav-right, .nav-right > li {
float: right;
margin: 0;
}
.nav-left, .nav-left > li {
float: left;
margin: 0;
}
.navbar-fixed-top {
position: sticky;
margin-bottom: 20px;
top: 0;
border-bottom: 1px solid black;
}
.navbar-fixed-top::before {
display: block;
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
top: -142px;
background-color: #008ed0;
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
.tooltiptext {
display: block;
background-color: #008ed0;
opacity: 0;
width: 0;
color: white;
margin-left: 10px;
text-align: center;
z-index: 1001;
transition: width 1s ease-in-out, opacity 0.5s ease-in-out 0.5s;
}
.navigation li:hover .tooltiptext {
width: 150px;
opacity: 1;
}
body {
padding-top: 0px;
padding-bottom: 20px;
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
li > a {
display: inline-flex;
width: 100%;
padding: 15px 20px;
color: #fff;
text-decoration: none;
fill: white;
}
li > a:hover, li > a:focus {
background-color: #d50f67;
color: white;
fill: white;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Any and all help is greatly appreciated. Linking to this CodePen in the hopes someone can help.
Kind regards,
Don
Related
I am currently coding a responsive menu using the checkbox hack and noticed that when my menu appears after clicking the hamburger icon, it is wider than the viewport. The menu has a fixed position and a flex display. I have added red borders around elements to give show this issue. Here is the relevant code:
/* General styles */
html, body { height: 100%; }
body {
font-family: 'Miriam Libre', sans-serif;
}
a {
color: white;
text-decoration: none;
transition: 0.2s;
}
a:hover {
color: #ea3c53;
}
/* Navigation styles */
nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #222222;
}
.donate {
position: absolute;
margin: 21px;
}
nav .brand {
display: block;
height: 70px;
margin: 10px auto;
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
nav label {
position: absolute;
top: 0;
right: 0;
padding: 21px;
background: #63E2C6;
cursor: pointer;
z-index: 2;
}
nav > label > span {
display: block;
margin: 4px auto;
height: 4px;
width: 25px;
border-radius: 1px;
background: #ffffff;
transition: 0.5s;
}
.menu {
display: flex;
position: fixed;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
top: -100vh;
left: 0;
height: 100vh;
width: 100%;
background: #222;
list-style-type: none;
border: 1px solid red;
transition: top 0.5s cubic-bezier(0.3, 0.1, 0.3, 0.85);
}
.menu li {
font-size: 30px;
border: 1px solid red;
}
input[type=checkbox]:checked ~ .menu {
top: 0;
}
<nav>
<!-- Top bar -->
Donate
<img src="media/logo2.png" alt="Logo" class="brand">
<input type="checkbox" id="nav">
<label for="nav">
<span></span>
<span></span>
<span></span>
</label>
<ul class="menu">
<li>Home.</li>
<li>Mission.</li>
<li>Contact.</li>
</ul>
</nav>
So, my question is, why is this happening? After all, I do have the width set to 100%, not 110%.
You have margin on your body element. Add:
body {
margin: 0;
}
There is also default margin and padding on your ul element that is also being set to width: 100%;
I recommend checking all of your primary containers, looking at them in your browser's inspector will highlight when you have additional spacing on an element that you may not be accounting for.
I have the following link hover animation:
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
body {
font-family: Arial;
background-color: red;
}
ul {
list-style-type: none;
width: 33vw;
margin: 0;
padding: 0;
}
li {
margin: 0 10px;
padding: 2px;
}
a {
text-decoration: none;
color: white;
font-size: 25px;
}
a::after {
content: "";
width: 0;
height: 2px;
background-color: white;
display: block;
transition: width 0.5s;
}
a:hover::after {
width: 100%;
}
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Events</li>
<li>Contact</li>
</ul>
</body>
</html>
In the above snippet, when I hover over each of the links, the underline properly animates. However, the underline ends at the width of the ul, not at the width of each link itself (e.g if I hover on the "Home" link, the animated underline goes way past the word "Home" itself, all the way to the end of the ul). How should I change my CSS for the a::after or a:hover::after pseudo-elements so that I get the behavior I'm looking for?
Make the link inline-block
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
body {
font-family: Arial;
background-color: red;
}
ul {
list-style-type: none;
width: 33vw;
margin: 0;
padding: 0;
}
li {
margin: 0 10px;
padding: 2px;
}
a {
text-decoration: none;
color: white;
font-size: 25px;
display: inline-block;
}
a::after {
content: "";
width: 0;
height: 2px;
background-color: white;
display: block;
transition: width 0.5s;
}
a:hover::after {
width: 100%;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Events</li>
<li>Contact</li>
</ul>
just use inline block to your style
a {
display: inline-block;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
body {
font-family: Arial;
background-color: red;
}
ul {
list-style-type: none;
width: 33vw;
margin: 0;
padding: 0;
}
li {
margin: 0 10px;
padding: 2px;
}
a {
text-decoration: none;
color: white;
font-size: 25px;
display: inline-block;
}
a::after {
content: "";
width: 0;
height: 2px;
background-color: white;
display: block;
transition: width 0.5s;
}
a:hover::after {
width: 100%;
}
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Events</li>
<li>Contact</li>
</ul>
</body>
</html>
I just actually finished setting this up, but did not even want to have any extra underline for any of my links. So I fixed it with pure css (scss actually) as well, but got specific. This is the css (scss) I used to make the underline only span the width of the text:
.main-nav {
background: rgba(103, 128, 159, 1);
display: block;
height: 100vh;
left: 0;
right: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
padding-top: 5rem;
overflow-y: hidden;
position: fixed;
top: 0;
/* hide the menu above the screen by default */
transform: translateX(-100%);
/* transition adds a little animation when sliding in and out the menu */
transition: transform 0.2s ease;
width: 100vw;
/* needed for me because of my intro box in index.html.
Otherwise navigation backgrop would be behind the intro box when opened */
z-index: 10;
/* so that the nav link underlining from framer motion does not span across the width of the main-nav backdrop */
& li > a {
display: block;
width: 6rem;
}
& li:nth-of-type(1) > a {
width: 3.5rem;
}
& li:nth-of-type(2) > a {
width: 3.5rem;
}
& li:nth-of-type(3) > a {
width: 2.75rem;
}
& li:nth-of-type(4) > a {
width: 4.75rem;
}
& li:nth-of-type(5) > a {
width: 6.5rem;
}
& li:nth-of-type(6) > a {
width: 2.75rem;
}
}
.main-nav is the class for the ul. I just set an arbitrary initial width, and then the specific ones for the specific anchor elements.
Navbar elements appear different in Firefox and Chrome. I use span tag to animate hamburger menu but it looks totally different in Firefox. It looks fine in Chrome and other browsers including Android. I tried browser reset CSS also. I don't know what I'm missing.
see this jsfiddle example in firefox
html, body, div, span, h1, p, a, address, img, i, ul, li, footer, header, nav, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
footer, header, nav, section {
display: block;
}
body {
line-height: 1;
}
ul {
list-style: none;
}
a, a:hover {
text-decoration: none;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*----- reset end-----------*/
.header {
background-color: #333;
width: 100%;
transition: .8s;
}
.header nav {
width: 100%;
margin: 0 auto;
position: sticky;
height: 100vh;
top: 16px;
}
.header nav .btn {
outline: none;
border: none;
display: block;
cursor: pointer;
background-color: #fff;
width: 2.5rem;
height: 2.5rem;
margin: 16px;
}
.header nav .btn span {
background-color: #FD5B4E;
width: 95%;
height: 0.1875rem;
position: relative;
display: block;
margin: auto;
top: 50%;
transition: background-color .5s .3s;
}
.header nav .btn span:before {
content: '';
background-color: #FD5B4E;
width: 100%;
height: 0.1875rem;
display: block;
top: -0.625rem;
position: absolute;
transition: top .3s .4s,transform .3s;
}
.header nav .btn span:after {
content: '';
background-color: #FD5B4E;
width: 100%;
height: 0.1875rem;
display: block;
position: absolute;
transition: top .3s .4s,transform .3s;
top: 0.625rem;
}
<body>
<header id="header" class="header sidbar">
<nav>
<button class="btn"><span></span></button>
</nav>
</header>
<!-- /header -->
</body>
The problem is with the top:50% in your CSS for the span. Its not doing anything on Chrome, but in FF its making the span move down 50% further than its default position (which is actually the middle already because you are using a button).
You just need to change this class:
.header nav .btn span {
background-color: #FD5B4E;
width: 95%;
height: 0.1875rem;
position: relative;
display: block;
margin: auto;
/* top: 50%; <- remove this and it works! */
transition: background-color .5s .3s;
}
If you used a div instead of a button you'd need to account for placing the span in the center, but the button element it is automatically centering the content vertically. By specifying that you want the top at 50%, FF is adding the 50% on to the current centred position.
Working example when you remove top:
Fiddle: https://jsfiddle.net/dt17u5uz/2/ or Snippet:
html, body, div, span, h1, p, a, address, img, i, ul, li, footer, header, nav, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
footer, header, nav, section {
display: block;
}
body {
line-height: 1;
}
ul {
list-style: none;
}
a, a:hover {
text-decoration: none;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*----- reset end-----------*/
/* autoprefixer: off */
/* autoprefixer: off */
.header {
background-color: #333;
width: 100%;
transition: .8s;
}
.header nav {
width: 100%;
margin: 0 auto;
position: sticky;
height: 100vh;
top: 16px;
}
.header nav .btn {
outline: none;
border: none;
display: block;
cursor: pointer;
background-color: #fff;
width: 2.5rem;
height: 2.5rem;
margin: 0 16px 16px;
}
.header nav .btn span {
background-color: #FD5B4E;
width: 95%;
height: 0.1875rem;
position: relative;
display: block;
margin: auto;
top: 0;
transition: background-color .5s .3s;
}
.header nav .btn span:before {
content: '';
background-color: #FD5B4E;
width: 100%;
height: 0.1875rem;
display: block;
top: -0.625rem;
position: absolute;
transition: top .3s .4s,transform .3s;
}
.header nav .btn span:after {
content: '';
background-color: #FD5B4E;
width: 100%;
height: 0.1875rem;
display: block;
position: absolute;
transition: top .3s .4s,transform .3s;
top: 0.625rem;
}
<body>
<header id="header" class="header sidbar">
<nav>
<button class="btn"><span></span></button>
</nav>
</header>
<!-- /header -->
</body>
FYI, you also have collapsing margin problems on your button, this might just be because you are only showing us part of your code. One way to overcome this is to add overflow:auto to your .header nav {} CSS rule. More about collapsing margins from sitepoint
I want to create a transition effect when hovering over my list element (or alternatively my anchor tags within these list elements).
Unfortunately, when I use my created transition the ::before pseudo-element (or the ::after, I'm not sure) are hiding what is technically its sibling content, that being the text within the anchor tags.
I've tried manipulating the z-index on the ul, li and a tags to no avail. The problem likely lies within my use of position: absolute in my transitions but I can't tell what I'm doing wrong.
Here's the HTML and CSS and a JSFiddle link
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#headercontainer {
background-color: #4f2f65;
height: 125px;
position: relative;
}
#headercontainer ul {
height: 100%;
display: table;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
#sitelogo {
padding-top: 0px;
}
#headercontainer ul li {
display: table-cell;
vertical-align: middle;
position: relative;
}
#headercontainer ul li a {
color: #fff;
font-size: 20px;
text-decoration: none;
}
a::before {
content: '';
display: block;
height: 0px;
background-color: #fff;
position: absolute;
bottom: 0;
width: 100%;
transition: all ease-in-out 200ms;
}
a:hover::before {
height: 125px;
}
header::after {
content: '';
display: table;
clear: both;
}
#headerlinkslist a:hover {
color: red;
}
.headerlinks {
padding-left: 80px;
padding-right: 80px;
}
<body>
<header>
<div id="headercontainer">
<ul id="headerlinkslist">
<li id="sitelogo"></li>
<li>RULES</li>
<li>NEWS</li>
<li>STATS</li>
<li>SUBMIT</li>
<li>LOGIN / REGISTER</li>
</div>
</header>
</body>
give the parent li a z-index, then use z-index: -1 on the pseudo element to push it behind the a but on top of the li.
You also need to close your ul
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#headercontainer {
background-color: #4f2f65;
height: 125px;
position: relative;
}
#headercontainer ul {
height: 100%;
display: table;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
#sitelogo {
padding-top: 0px;
}
#headercontainer ul li {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 1;
}
#headercontainer ul li a {
color: #fff;
font-size: 20px;
text-decoration: none;
transition: color .25s;
}
a::before {
content: '';
display: block;
height: 0px;
background-color: #fff;
position: absolute;
bottom: 0;
width: 100%;
transition: all ease-in-out 200ms;
z-index: -1;
}
a:hover::before {
height: 125px;
}
header::after {
content: '';
display: table;
clear: both;
}
#headerlinkslist a:hover {
color: red;
}
.headerlinks {
padding-left: 80px;
padding-right: 80px;
}
<body>
<header>
<div id="headercontainer">
<ul id="headerlinkslist">
<li id="sitelogo"></li>
<li>RULES</li>
<li>NEWS</li>
<li>STATS</li>
<li>SUBMIT</li>
<li>LOGIN / REGISTER</li>
</ul>
</div>
</header>
</body>
I'm currently trying to make a website, and I managed to create a navigation bar. However, there is a weird "extra" space between my navigation bar. It was working fine at first but after I referenced a JQuery. However, I doubt the JQuery is the one that caused the problem as the site looks the same even after I took it out. Here's a screenshot of the problem. I'm trying to get rid of the circled part.
My HTML code:
<div id="nav"> <!-- Navigation Bar -->
<nav>
<ul>
<li><a class="selected" href="#">Home</a></li>
<li>About Me</li> <!-- Link to about page -->
<li class="drop">
Games
<div class="drop-content">
Red Faction: Guerrilla <!-- Contains links to the respective pages -->
Way of the Samurai 3
Singularity
</div>
</li>
<li>Reviews</li>
<li>External Store</li> <!-- Link to external site -->
<li>Videos</li> <!-- Contains links to Youtube -->
<li>Feedback</li> <!--Feedback form-->
And here's the stylesheet:
#nav nav{ /* Navigation bar*/
padding-top: 5%;
margin-bottom: 5% }
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 0;
display: inline-block }
#nav li {
float: left;
width: 14% }
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 15%;
padding-right: 15%;
text-decoration: none }
.selected {
background-color: #6CCC0A;
padding-right: 25% }
li a:hover, .drop:hover .dropbtn {
background-color: #BFA810 }
a {
padding-top: 1em;
padding-bottom: 1em }
li.drop {
display: inline-block }
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 14%;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100 }
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left }
.drop-content a:hover {
background-color: #02BBC4 }
.drop:hover .drop-content {
display: block;
border: 1px solid black;
position: absolute } /*End of navigation*/
* { /* index style */
box-sizing:border-box
}
body {
font-family: Verdana,sans-serif;
margin:0
}
.slideshow-fade {
display:none
}
/* Slideshow container */
.slideshow {
max-width: 100%;
position: relative;
margin: auto;
}
.slideshow img {
opacity: 0.7
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 1em;
margin-top: -1em;
color: #FFFFFF;
font-weight: bold;
font-size: 1.5em;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #000000;
font-size: 1.3em;
padding: 1% 2%;
position: absolute;
bottom: 2%;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.number {
color: #000000;
font-size: 1em;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 1em;
width: 4%;
margin: 0 2px;
background-color: #bbbbbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width : 720px ){
.prev, .next,.text {font-size: 11px}
}
.slideshow-fade a {
color: #FFFFFF
}
.slideshow-fade a:visited {
color: #5115D0
} /*End of style for index*/
footer { /*Footer*/
background: #000000;
width: 100%;
height: 5%;
position: relative;
bottom: 0;
left: 0;
padding-top: 2%;
overflow: hidden;
}
footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
padding-bottom: 2%;
} /*End of footer*/
Any help will be much appreciated. Thank you.
Here is the jsfiddle file to make it more convenient to see the problem. https://jsfiddle.net/8xutoea5/
Edit: Added more CSS codes.
Edit: I solved the problem. Thanks everyone for taking the time to solve this problem.
It appears to be a margin somewhere else in your CSS, not provided here, that is causing the issue. You could try setting margin-bottom:0; a few places to see if that solves it.
#nav nav ul li {
margin-bottom: 0;
padding-bottom: 0;
}
#nav nav ul li a {
margin-bottom: 0;
}
Or provide the rest of your style sheet.
It's most likely because you have your ul as inline-block, that will cause some space after elements. Also you have float on your li without a clearfix on nav.
You can solve this in various ways, here is one where you can use display: flex; and remove the float: left; on li. This is a pretty solid base you can build on with changing the justify-content property. You can find a awesome guide to flexbox over at css-tricks.com
UPDATE
I made some updates to the fiddle to solve the problem. Please note the code on top, also I made some other changes. Write if there is something unclear
* {
box-sizing: border-box;
}
jsfiddle
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 0;
display: flex;
justify-content: space-between;
}
#nav li {
width: 14%;
}
It's caused by the section "External Store", it's too long and it wraps. You can make it shorter or force a "no-wrap".
With the css property white-space with the value nowrap.
You have no classes on your internal tags so I would suggest add a class to the a tags and add the rule to it.
a.listLink{
white-space: nowrap;
}
Or you can just add a style attribute to that specific tag but I don't find that solution cool enough.