I made an effect for my search input, when it's focused its spreads to 100% width with nice smooth transition, but he also push other li elements and they don't have nice 'animation'. They just 'jump' away from search input.
My html:
<div class="navigation">
<div class="col-lg-6 col-xs-12">
<ul>
<li>Home</li>
<li>About</li>
<li><input type="search" name="search" placeholder="Search..."></li>
</ul>
</div>
</div>
My CSS:
.navigation {
text-align: right
}
.navigation ul {
list-style: none;
margin-top: 22px;
}
.navigation li {
display: inline-block;
font-size: 20px;
padding-right: 12px;
}
.navigation li a {
color: #d3d5d7;
text-decoration: none;
transition: color 1s;
}
.navigation li a:hover {
color: #2980b9;
}
input[type=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('../images/searchicon.png');
background-position: 10px 14px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.6s;
transition: width 0.6s;
}
input[type=search]:focus {
width: 100%;
}
Any suggestions how to fix this?
Also i made codepan: codepan.io
This is because it is inside an <li>, which is generally not where you want your <input> to be. You can place it outside of the <ul> and float it, or position it in a different way. This way it will push the content correctly.
I set up a quick fiddle for you here, it's a bit crude, but it shows what it is supposed to show. https://jsfiddle.net/176hxsuj/
If you do however want it in the <li>, animate the <li> instead of the <input>.
Related
I'm trying to make a navigation bar with a border-bottom as the hover effect which purpose is to follow the user mouseover and highlight the item. However, the border-bottom is including the padding of its parent, which I don't like. Using padding: 0px; doesn't do it.
Here's what I've got so far, bear with me since I'm fairly new to HTML & CSS and this is my first time making a website:
*{
padding: 0px;
margin: 0px;
}
#navdiv ul {
width: 100%;
height: 80px;
line-height: 80px;
vertical-align: middle;
background: #333;
margin-top: 5px;
}
#container {
margin-left: 200px;
margin-right: 200px;
}
#navdiv ul a {
width: 80%;
text-decoration: none;
color: #f2f2f2;
padding: 15px;
font-size: 16px;
}
#navdiv ul li {
height: 63px;
list-style-type: none;
float: right;
}
#navdiv ul li:hover {
border-bottom: 5px solid #FF9933;
transition: all 0.3s ease-in-out;
}
#highlight {
display: inline-block;
line-height: 1em;
padding: 0;
border-bottom: 5px solid #FF9933;
}
#navdiv img {
width: auto;
height: auto;
max-width: 100%;
max-height: 60px;
vertical-align: middle;
}
<nav>
<div id="Maindiv">
<div id="navdiv">
<ul>
<div id="container">
<img src="../img/menu-logo.png" alt="Menu Logo">
<li>Item 4</li>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</div>
</ul>
</div>
</div>
</nav>
As you can see, the orange border-bottom is taking "Item 1" padding which is making the border-bottom larger than it's content, which I find it ugly and I would like to fix it.
While at it, is there a way to make the border-bottom animation come from the left to right? If so, is there also a way to make it "smart" enough to know that if the user's cursor comes from the left of the item, it should animate from "left to right" and if the cursor comes from the right animate it from "right to left" accordingly?
I would also love to make it follow the user cursor instead of instantly disappearing after leaving the previous item and immediately appearing once the next item is hovered.
Sorry for the long post, I've got so many questions and so little luck while troubleshooting using google with the little knowledge that I know.
Massive thanks!
- Kay.
Removing width: 80%; from #navdiv ul a will fix the larger border-bottom issue.
Please find below for left-to-right border-bottom effect.
https://codepen.io/julysfx/pen/qXBzYL
The reason for the border looking like that is because the border is around the outside of the HTML element. Padding is within the element so the border will incorporate that and thus do a border at that boundary. This stack overflow question explains this with diagrams:
Difference between margin and padding?
You might want to change to using margin to space out the items. Also, width: 80% might also make the border look a bit longer than you imagined. You could either increase the margin between items, or if you really want the items to be 80% wide, you could have a parent div which is 80% width so that it doesn't affect the border.
Is this more what you are looking for?
*{
padding: 0px;
margin: 0px;
}
.slider {
position: absolute;
display:block;
left: 0;
top: 90%;
margin: 0 auto;
height: 2px;
width: 0%;
border-bottom: 5px solid #FF9933;
transition: width 1s ease;
}
#navdiv {
background: #333;
}
#navdiv ul {
width: 100%;
display: inline;
}
#container {
margin-left: 200px;
margin-right: 200px;
height: 63px;
line-height: 63px;
}
#navdiv ul a {
text-decoration: none;
color: #f2f2f2;
font-size: 16px;
}
#navdiv ul li {
list-style-type: none;
float: right;
position:relative;
display:inline;
background-color: red;
line-height: 29px;
margin-top: 16px;
margin-right: 10px;
}
#navdiv ul li:hover .slider {
border-bottom: 5px solid #FF9933;
transition: all 0.3s ease-in-out;
width: 100%;
}
#highlight {
display: inline-block;
line-height: 1em;
padding: 0;
border-bottom: 5px solid #FF9933;
}
#navdiv img {
width: auto;
max-width: 100%;
}
<nav>
<div id="Maindiv">
<div id="navdiv">
<div id="container">
<img src="../img/menu-logo.png" alt="Menu Logo">
<ul>
<li>
Item 5
<span class="slider"></span>
</li>
<li>
Item 4
<span class="slider"></span>
</li>
<li>
Item 3
<span class="slider"></span>
</li>
<li>
Item 2
<span class="slider"></span>
</li>
<li id="highlight">
Item 1
<span class="slider"></span>
</li>
</ul>
</div>
</div>
</div>
</nav>
In my navagation bar, I want only hovered on elements to stretch out and change color, but it seems the whole navagation bar stretches. I've tried changing what must be hovered on to trigger the animation, but nothing seems to be working. Can you identify and correct my error?
#keyframes mouse {
0% {
background-color: #35B1C2;
height: 40px
}
100% {
background-color: #2F9EBD;
height: 60px
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #35B1C2;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:hover {
animation-fill-mode: forwards;
animation-duration: 0.5s;
animation-name: mouse;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
</ul>
You can remove the overflow:hidden and add
overflow:visible;
height:45px; /* The height of your navbar */
to your ul element.
Try this:
ul, li a:hover {
font-size: 30px;
color: red;
}
There is actually no error in your code. What happens is that the ul box contains the li boxes. So, when you hover on a li box and the li box's height increases from 40px to 60px, the ul box that is containing that box also stretches out because it needs to contain the li box.
So, you just need to work around that issue. I'd suggest not using the ul box at all, but that's just something I think is more efficient because you realize you don't actually really need it (you'd still need to contain the navigation bar inside of a box, maybe a div or header).
You have not set a nav bar heigh. So when the li height change on hover, the navbar will adjust its height to fit the content. Instead of going with animation, I would do this with a simple transition. Add a min-height to the navbar and apply a transition property to the ul tag. Also apply an overflow:visible on hover
See snippet below
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #35B1C2;
min-height: 50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li :hover {
background-color: #2F9EBD;
height: 60px;
transition: all 1s;
}
ul:hover {
overflow: visible;
}
li {
border-right: 1px solid #bbb;
transition: all 1s;
}
li:last-child {
border-right: none;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
</ul>
</body>
</html>
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I have a ul for a navigation bar. In my CSS, I have a hover color transition. Here's the code:
HTML:
<body>
<ul>
<li class="sideBarButton">
<a href="www.google.com">
Home
</a>
</li>
<li class="sideBarButton">
<a href="www.google.com">
About
</a>
</li>
<li class="sideBarButton">
<a href="www.google.com">
Download
</a>
</li>
</ul> <!--- Navbar-->
</body>
CSS:
.sideBarButton {
font-family: Verdana;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #000;
background-color: #000;
border: 2px none #FFF;
clear: none;
float: left;
height: auto;
list-style-type: none;
display: block;
width: 90px;
margin: 0px;
padding: 0px;
text-align: center;
text-align-last: center;
opacity: 1;
}
.sideBarButton a {
background-color: #000;
background-image: url(woodbutton.gif);
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
text-align: center;
text-decoration: none;
width: 90px;
display: block;
color: black;
}
.sideBarButton a:hover {
opacity: 0.7;
(Sorry for the slightly messy code, I've been meaning to sort through it and weed out the unneeded bits.) The buttons are pictures. I had the idea to round the two first-child and last-child selectors, but I think I've messed up somehow in (layering?) the selectors, for when I assign a class to the full ul, and set up a css selector (ex: .ulClass .sideBarButton:first-child) it doesn't do anything. What am I missing, and how would I fix it?
Thanks in advance! (NOTE: Ignore the class names, this is a top navbar, not a side, no matter what they might suggest!)
Edit: just to clarify, I want to round all four corners of the navbar.
You can target the li instead of the class
.ulClass > li:first-child
{
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.ulClass > li:last-child
{
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
I also removed the offending style Display:block from .sideBarButton a which was causing the rounded corners not being applied.
Probably a good idea to clean up your code and take out the unnecessary styles.
Check out this fiddle http://jsfiddle.net/aSn8C/5/
I'm working on a navigation, and I can't seem to figure out how to make the bottom border increase in size upwards, instead of expanding downwards (which in turn extends my header a few pixels), I could fix the extending header with setting a height, but the the border will still extend downwards instead of upwards.
The CSS:
header {
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 100%;
position: absolute;
background: #000000;
}
ul {
list-style-type: none;
display: block;
margin: 0 0 0 20px;
padding: 0;
}
ul li {
display: inline-block;
padding: 0;
}
ul li a{
display: block;
border-bottom: 1px solid #fff;
font-size: 19px;
}
ul li a:hover{
border-bottom: 2px solid #fff;
background: #333;
font-size: 19px;
}
The HTML:
<header>
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>
</header>
The JSFiddle:
http://jsfiddle.net/Artsen/EZWvF/
So you want to increase the border-bottom to the top, right?
I've actually had to do this for a website recently. There is no other way than to set specific padding, and border properties.
I edited your jsfiddle here: http://jsfiddle.net/EZWvF/2/ (changed some properties to make the test case more visible)
The principle is: Swap the pixel values from padding-bottom and border-bottom on hover.
These are the key lines to your solution:
ul li a {
border-bottom: 1px solid white;
padding-bottom: 5px;
}
ul li a:hover {
border-bottom: 5px solid white;
padding-bottom: 1px;
}
Note: This only works if you don't add a css-transition. If you unquote the css-transition I put in the fiddle, you'll see that the div still expands to the bottom. If you want a ss-transition you'll need to add a separate div to the li's to mimic a border.
As Tyblitz suggested using extra padding value on :hover works great when you don't need a transition.
If you need transition and don't want to introduce an extra div you can do it using the line-height/height approach for controlling the vertical height.
so instead of doing this:
.nav-element a {
color: gray;
padding: 25px 15px;
transition: all ease-in-out 0.2s;
display: block;
text-decoration: none;
}
do this:
.nav-element a {
color: gray;
padding: 0 15px;
line-height: 70px;
height: 70px;
transition: all ease-in-out 0.2s;
display: block;
text-decoration: none;
}
See example where it doesn't work here
and does work (using the line-height/height) here