Live fiddle:
http://jsfiddle.net/jMAzr/1/
Working example at Apple.com:
http://www.apple.com/
<html>
<head>
<style>
body {
background:#000000;
}
li {
list-style:none;
display: list-item;
}
ul.menu li {
float:left;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
font-weight: 400;
}
ul.menu li a {
text-decoration:none;
}
.header-tab-title {
display: block;
position: relative;
height: 46px;
line-height: 46px;
cursor: pointer;
font-size: 16px;
color: #fff;
text-align: center;
}
.search-field {
width: 70px;
border-radius:10px;
transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
-webkit-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
animation-direction:reverse;
-webkit-animation-direction:reverse; /* Safari and Chrome */
border: 1px solid #353535;
height:18px;
padding: 0px 23px 4px;
color:#FFF;
}
.search-field:focus {
color:#000;
width: 140px;
margin-left:-70px;
height:20px;
}
</style>
</head>
<body>
<ul class="menu">
<li><span class="header-tab-title" style="width:124px;">Produtos</span></li>
<li><span class="header-tab-title" style="width:151px;">Sites Prontos</span></li>
<li><span class="header-tab-title"style="width:192px;" >Anuncie no Google</span></li>
<li><span class="header-tab-title" style="width:230px;">Facebook Para Negócios</span></li>
<li><span class="header-tab-title" style="width:152px;">Hospedagem</span></li>
<li><span class="header-tab-title" style="width:110px;"><input class="search-field" type="search"></span></li>
</ul>
</body>
</html>
The behaviour you are looking for requires a table layout to change the width of the other "cells" as one grows. I have created a simplified fiddle with this layout:
http://jsfiddle.net/Hp3JU/
I've removed a couple of elements to simplify the example but the essence of the solution is to have an outer display: table, then a display:table-row then each "cell" is display:table-cell. Give the "table" a fixed width and remove the negative margin on the :hover psuedo-class to prevent the last cell overlapping its neighbor. You'll also need to remove your hardcoded fixed widths so your cells can collapse as required to make room.
<div class="table">
<ul class="menu">
<li>Produtos</li>
<li>Sites Prontos</li>
<li>Anuncie no Google</li>
<li>Facebook Para Negócios</li>
<li>Hospedagem</li>
<li><input class="search-field" type="search" /></li>
</ul>
</div>
CSS (Relevant parts only):
.table {
display: table;
width: 100%;
}
ul.menu {
display: table-row;
}
ul.menu > li {
display: table-cell;
}
.search-field {
width: 70px;
border-radius:10px;
transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
-webkit-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out,margin-left 0.5s ease-in-out;
animation-direction:reverse;
-webkit-animation-direction:reverse; /* Safari and Chrome */
border: 1px solid #353535;
height:18px;
padding: 0px 23px 4px;
color:#FFF;
}
.search-field:focus {
color:#000;
width: 140px;
height:20px;
}
Apple does it by adding a class to the nav element when the user focuses the search field.
Default State:
Active State:
Thus, to mimic the same functionality you're going to need JavaScript to add a class to the ul.menu element. This class will change the width of the menu. Use CSS animations to control the sliding effect.
Related
I have a problem with transitions with my checkbox. All I want to do is to dropdown menu slowly on low width resolution.
Here is my code:
HTML:
<nav class="header-nav">
<input type="checkbox" id="header-nav-button">
<label for="header-nav-button">☰</label>
</input>
<ul>
<li><a class="header-nav-links" id="active">Home</a></li>
<li><a class="header-nav-links about-us">About Us</a></li>
<li><a class="header-nav-links">Our Services</a></li>
<li><a class="header-nav-links">Prices</a></li>
<li><a class="header-nav-links">Contact</a></li>
</ul>
</nav>
Input CSS:
input[type="checkbox"] + label{
font-size: 40px;
cursor: pointer;
color: #ed145b;
font-family: Lato;
font-weight: 700;
line-height: 38px;
padding: 0 20px;}
input, label{
display: none;}
And my CSS code placed in #media (max-width: 600px):
label{
display: inline-block;
}
#header-nav-button{
}
#header-nav-button:not(:checked) ~ul{
display:none;
height: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all 5s ease;
}
}
#header-nav-button:checked ~ ul{
display: block;
height: 200px;
}
#header-nav-button:checked ~ ul li{
display: block;
padding: 0 20px;
}
I tried the trick with height, visibility and opacity - nothing worked for me unfortunatly. It seems that transition is just not working properly.
You can't animate height.
But you CAN animate max-height.
<nav class="header-nav">
<label for="header-nav-button">☰</label>
<input type="checkbox" id="header-nav-button">
<ul>
<li><a class="header-nav-links" id="active">Home</a></li>
<li><a class="header-nav-links about-us">About Us</a></li>
<li><a class="header-nav-links">Our Services</a></li>
<li><a class="header-nav-links">Prices</a></li>
<li><a class="header-nav-links">Contact</a></li>
</ul>
</nav>
I positioned label above input so I can use the more precise + selector in CSS (#header-nav-button + ul)
label {
font-size: 40px;
cursor: pointer;
color: #ed145b;
font-family: Lato;
font-weight: 700;
line-height: 38px;
padding: 0 20px;
}
input,
label {
display: none;
}
#media ( max-width: 600px) {
label {
display: inline-block;
}
ul {
max-height: 0;
overflow: hidden;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
ul li {
padding: 0 20px;
}
#header-nav-button:checked+ul {
max-height: 999px;
}
}
I removed the display attributes because you can't animate display. Instead, I used overflow: hidden to hide the menu.
And I changed height to max-height. The good thing about this, is you don't need to know the exact height of the menu, you can set it to an amount you know it will never reach. This way you're menu can "grow" without you having to figure out its height every time.
https://jsfiddle.net/w4fwbw3s/8/
I have a ul list with float:right for li.
I want to set this to center of page.
margin and left doesnt work well.
I want when mouse is over a link ,keep position of other link and dont move forward.
My css code is this:
#menu2 li a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu2 li a:hover {
border: none;
font-size: 30px;
}
<!--===============================================================<!--===============================================================--> --> ul,
li {
display: inline-block;
}
#menu2 ul {
list-style-type: none;
background-color: #003;
text-align: center;
}
#menu2 li {
float: left;
list-style-type: none;
padding: 15px 15px;
}
#menu2 {
min-width: 800px;
margin-top: 15%;
right: 65% !important;
}
#menu2 li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: #093;
transition: all 0.5s ease 0s;
font-size: 18px;
min-width: 95px;
border-radius: 50px;
}
<div align="center" style="height:100%;width:100%;">
<div class="menu" id="menu2" align="center">
<ul>
<li>Brands</li>
<li> Contact </li>
<li> Price List </li>
<li> About </li>
<li> Home </li>
</ul>
</div>
</div>
How can I solve this???
I use a:after but doesnt work.
I have added to your CSS, I Changed the hover text size to 25px and your button width to 135px and added in a whitespace:nowrap to the anchor tags.
what was happening is when you hover the text would grow and wrap because it could not fit into your containers, so i turned wrap off and also made the button containers width bigger to fit when enlarged
I hope this is what you are after as the buttons no longer move around the page when hovered on.
EDIT: Added CSS to your ul tag = float:left; so your buttons sit inside and achieve the dark blue background.
CSS
#menu2 li a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu2 li a:hover {
border:none;
font-size:25px; /*Changed by Steve */
}
<!-- ===============================================================
<!--=============================================================== -->
-->
ul,li
{
display:inline-block;
}
#menu2 ul
{
list-style-type: none;
background-color: #003;
text-align:center;
float:left;
}
#menu2 li {
float: left;
list-style-type:none;
padding:15px 15px;
}
#menu2
{
min-width:800px;
margin-top:15%;
right:65% !important;
}
#menu2 li a {
display: table-cell;
vertical-align:middle;
color: white;
text-align: center;
text-decoration: none;
background-color:#093;
transition: all 0.5s ease 0s;
font-size:18px;
min-width:95px;
width:135px; /*CHANGED by Steve*/
height:48.8px;
border-radius: 50px;
white-space:nowrap; /*ADDED by Steve */
}
By replacing the li with div and write CSS style with the following attributes and change CSS Codes for div the problem was solved.
Thanks all
<div align="center" style="height:100%;width:100%;">
<div class="menu" id="menu2" align="center" >
<div style="z-index:18;position:absolute;margin-right:25px;text-align:center;vertical-align:middle;" align="center" >Brands</div>
<div style="z-index:17;position:absolute;margin-right:155px;"> Contact </div>
<div style="z-index:16;position:absolute;margin-right:265px;"> Price List </div>
<div style="z-index:15;position:absolute;margin-right:405px;"> About </div>
<div style="z-index:14;position:absolute;margin-right:520px;"> Home </div>
</div>
</div>
I have ben boxing with this issue for ages now.
I have a parent div "wrapper" containing a child div "sidebar-wrapper" consisting of an ul with li in it.
I want "sidebar-wrapper"s height to fit "wrappers" height. My issue is when i set its height to auto goes 0.
My HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
a lit of these li's
</a>
</li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
Whatever Content!!
</div>
</div>
</div>
</div>
My css:
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:400px;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
See this fiddle
The CSS used is as follows
html,body{
height: 100%;
}
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
I've given height:100% for html,body,wrapper and body-content..
Setting height to auto just sets the height equal to the height of the contents of the div..here i think you want the height to be equal to the wrapper..so you'll have to set it to 100%.
and this is how can i see your website after making the specified changes..
Change the sidewrapper height to 100% and give the wrapper a height: see fiddle: See fiddle
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: auto; /* example height */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
Set the parent div's position to relative and children div's to absolute:
#wrapper {
...
...
/**** added css ****/
position:relative;
/*********************/
...
...
}
Edit 1
as you commented, I came to learn that you want the sidebar to available throughout the page regardless the height of the page.
If that is the case then "wrapper" div has nothing to do with.
Just set the position of "sidebar-div" to "fixed" and give proper top and bottom margins according to your page header and footer margins:
and set the top and bottom of child wrapper to 0:
#sidebar-wrapper {
...
...
/**** added css ****/
position:fixed;
top:10px;
bottom:10px;
/*********************/
...
...
}
Here's the updated demo JS fiddle link:
Updated Demo JS Fiddle Link
Hope that helps!
I'm trying to set up a hover header for my site, but having a lot of trouble getting it to do what I want. I have individual smaller divs to display staff members and when hovered over I want it to give a slide effect, preferably to the left.
Ok, I created a fiddle here http://jsfiddle.net/2badzt19/
HTML:
<div class="staffinfo">
<a class="first-link" href="">
<img src=http://i57.tinypic.com/23tsj0i.jpg>
</a>
<a href="">
Admin Info
</a>
</div>
CSS:
.staffinfo a{
color: white;
text-decoration:none;
text-align: center;
display:block;/* important */
}
.staffinfo, .first-link{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.staffinfo{
height: 100px;
font: normal normal 700 1em/4em Arial,sans-serif;
overflow: hidden;
width: 120px;
background-color: #3b5998;
}
.staffinfo:hover{
background-color: #003D99;
}
.staffinfo a:hover{
text-decoration: none;
}
.first-link{
margin-top: 0em;
}
.staffinfo:hover .first-link{
margin-top: -7em;
}
How would I make it slide left? And how can I display it as a table of 6 images the same size, 2 columns, 3 rows?
Heres how I'd do it, no table but a list:
HTML
<ul class="slider">
<li>Admin Info</li>
<li>User Info</li>
<li>Something</li>
<li>Something Else</li>
<li>What?</li>
<li>More</li>
</ul>
CSS
ul.slider
{
width:280px;
list-style:none;
padding:0;
}
ul.slider>li {
height: 100px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 120px;
background-color: #3b5998;
background-image:url("http://i57.tinypic.com/23tsj0i.jpg");
position:relative;
display:inline-block;
}
ul.slider>li>a {
display:block;
margin-left:120px;
width: 120px;
height:100px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
color:#FFF;
text-align:center;
line-height:100px;
}
ul.slider>li:hover>a {
margin-left:0px;
background-color: #003D99;
}
Basically, the a is offset to the right via a margin the same with of the li. This margin is removed on hover of the li
Example
Now with sexy transparent background
Or if you want inline images
I downloaded this MENU from dynamicdrive.com but there is someone wrong in it.
It works fine in FireFox , Safari and Chrome. But not working in IE.
In IE 9 or lower, it appears vertical menu not horizontal and hover is not working also.
CSS
<style>
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
background: #e3e3e3;
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px;
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px;
height:50px;
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: white;
background: #a71b15;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.spotlightmenu li a span{
position:relative;
top:35%;
}
</style>
HTML
<div class="spotlightmenu">
<ul>
<li><span>Home</span></li>
<li><span>About us</span></li>
<li><span>Products</span></li>
<li><span>Contact us</span></li>
</ul>
</div>
If you are testing in IE-9 or lower the transitions will not work. It is currently working in IE-10. Hope this helps.
Your CSS is using the transition timing function. This is not supported in IE 9 or below. The bar is horizontal in all the browsers I tested. If you're using something < IE 9, you should look to get a new computer