Hi I have created boxes with overflow: hidden, now on hover I would like for the box to drop down showing inner box.
I have created this and it works fine however I would like to use a transition on this effect to smoothen the drop down. I have added the transition and it is not working.
Any advice would be great on this thank you.
<html>
<head>
<title></title>
<style type="text/css">
#items {width:300px;}
.item {width:100px;border:solid 1px #ccc;float:left;height:20px;
z-index:0;overflow:hidden;position:relative;}
.item:hover{overflow:visible;z-index:100;}
.item:hover .inner{z-index: 100;}
.inner{position: absolute;
background: white;
width: 100%;
}
</style>
</head>
<body>
<div id="items">
<div class="item"><div class="inner">text 1<br>text 1<br>text 1</div></div>
<div class="item"><div class="inner">text 2<br>text 2<br>text 2</div></div>
<div class="item"><div class="inner">text 3<br>text 3<br>text 3</div></div>
<div class="item"><div class="inner">text 4<br>text 4<br>text 4</div></div>
<div class="item"><div class="inner">text 5<br>text 5<br>text 5</div></div>
<div class="item"><div class="inner">text 6<br>text 6<br>text 6</div></div>
<div class="item"><div class="inner">text 7<br>text 7<br>text 7</div></div>
<div class="item"><div class="inner">text 8<br>text 8<br>text 8</div></div>
<div class="item"><div class="inner">text 9<br>text 9<br>text 9</div></div>
<div class="item"><div class="inner">text 10<br>text 10<br>text 10</div></div>
</div>
</body>
</html>
You can build the menu you want with just CSS, but you'll need a better html structure. I don't want to rebuild the wheel, so I got one (a very simple one) that is already done:
http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu
HTML
<nav>
<ul class="cf">
<li>Menu Item 1</li>
<li><a class="dropdown" href="#">Menu Item 2</a>
<ul>
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
</nav>
CSS
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav .dropdown:after {
content: ' ▶';
}
nav .dropdown:hover:after{
content:'\25bc'
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
/* Clearfix */
.cf:after, .cf:before {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
Try using jQuery Animations to that:
Your div for id=items should be.
<div id=items onmouseover=effects() onmouseout=normal()>
</div>
And your javascript should be:
<script>
function effects()
{
$(".inner").show();
}
function normal()
{
$(".inner").hide();
}
</script>
Related
How can I get this navigation bar to center?
The class menu I suppose is built in with bootstrap.min.css.
#header {
position: fixed;
width: 100%;
z-index: 999;
}
#header .header-content {
margin: 0px auto;
max-width: 1170px;
padding: 60px 0;
width: 100%;
-moz-transition: padding 0.4s;
-o-transition: padding 0.4s;
-webkit-transition: padding 0.4s;
transition: padding 0.4s;
}
.navigation {
float: right;
}
.navigation li {
display: inline-block;
}
.navigation a {
color: white;
font-size: 15px;
font-weight: bold; /* Normal - Bold - 400 */
margin-left: 30px;
letter-spacing: 4px;
text-transform: uppercase;
}
.navigation a:hover, .navigation a.active {
color: white;
}
<header id="header">
<div class="menu">
<div class="header-content clearfix">
<nav class="navigation" role="navigation">
<ul>
<li><a data-scroll href="#sec1">Inicio</a></li>
<li><a data-scroll href="#sec2">UEFA</a></li>
<li><a data-scroll href="#sec4">Equipo</a></li>
<li><a data-scroll href="#sec3">Contacto</a></li>
</ul>
</nav>
Menu<span></span>
</div>
</div>
</header>
If you remove the float: right from .navigation and you set text-align: center to that div you can center it.
https://codepen.io/anon/pen/BmBPej
I am a beginner in CSS and I would like to create a Menu with SubItems.
I have found a model on the internet and I would like to customize it but it doesn't work.
In the text you can find the XHTML and CSS File with just the Menu.
The Menu is shown correct but I want that the subMenus like 'Team' is shown with the corresponding Item.
I have searched on the internet and customized the " #menu ul li:hover > ul { " several times but I can't see the error. I think the error must be in that function because I want to appear the menu when I move the mouse over the Menu.
Could you please tell me where the error is?
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
p, ul, li, div, nav
{
padding:0; margin:0;
}
body {
font-family:Calibri;
}
#menu
{
position: absolute; overflow: auto; z-index:2;
}
.parent-menu {
background-color: white;
color:black;
min-width:200px;
float:left;
}
#menu ul
{
list-style-type:none;
}
#menu ul li a {
padding:10px 15px;
display:block;
color:black;
text-decoration:none; }
#menu ul li a:hover {
background-color:blue;
}
#menu ul li:hover > ul {
left: 200px; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in;
}
#menu ul li > ul {
position: absolute; background-color: #333; top: 0; left: -200px; min-width: 200px; z-index: -1; height: 100%; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; }
#menu ul li > ul li a:hover {
background-color:#2e2e2e;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
<title>CSS Site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header class="header">
<h1>CSS Site</h1>
</header>
<nav id="menu">
<ul class="parent-menu">
<li>Home</li>
<li>
About
<ul>
<li> Team</li>
<li> Philosophie</li>
<li> Partner</li>
</ul>
</li>
<li>References</li>
<li>
Contact
<ul>
<li>Way</li>
<li>Rooms</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
You have your ul being child of li if you want it to stay like this you would need to do next manipulations.
http://plnkr.co/edit/JaVAaMunLFnT3TPGNQnY?p=preview
/* Styles go here */
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
p, ul, li, div, nav
{
padding:0; margin:0;
}
body {
font-family:Calibri;
}
#menu
{
position: absolute; overflow: auto; z-index:2;
}
.parent-menu {
background-color: white;
color:black;
min-width:400px;
float:left;
}
#menu ul
{
list-style-type:none;
}
#menu li {
width:200px;
}
#menu ul li a {
padding:10px 15px;
display:block;
color:black;
text-decoration:none; }
#menu ul li a:hover {
background-color:blue;
}
#menu ul li:hover > ul {
top: 0px;
-webkit-transition: top 200ms ease-in;
-moz-transition: top 200ms ease-in;
-ms-transition: top 200ms ease-in;
transition: top 200ms ease-in;
}
#menu ul li > ul {
position: absolute;
background-color: #333;
top: -200px;
left: 200px;
min-width: 200px;
z-index: 0;
height: 100%;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul li a:hover {
background-color:#2e2e2e;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header class="header">
<h1>CSS Site</h1>
</header>
<nav id="menu">
<ul class="parent-menu">
<li>Home</li>
<li>
About
<ul>
<li> Team</li>
<li> Philosophie</li>
<li> Partner</li>
</ul>
</li>
<li>References</li>
<li>
Contact
<ul>
<li>Way</li>
<li>Rooms</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I changed animation from left to top, because it was causing problems with z-indexes, if it's necessary to be left, let me know and I'll try to help you out
You were missing too many things.
your HTML
<header class="header">
<h1>CSS Site</h1>
</header>
<nav id="menu">
<ul class="parent-menu">
<li>Home</li>
<li>
About
<ul>
<li> Team</li>
<li> Philosophie</li>
<li> Partner</li>
</ul>
</li>
<li>References</li>
<li>
Contact
<ul>
<li>Way</li>
<li>Rooms</li>
</ul>
</li>
</ul>
</nav>
CSS code that I've created
ul {
list-style: none;
}
li {
background-color: #fff;
cursor: pointer;
padding: 10px 15px;
max-width: 300px;
}
a {
color: black;
text-decoration: none;
}
.parent-menu li:hover a,
.parent-menu li ul li:hover {
color: blue;
}
.parent-menu li ul {
display: none;
}
.parent-menu li:hover ul {
display: block;
position: absolute;
left: 290px;
top: 0px;
}
.parent-menu li {
position: relative;
}
In it I've created a basic code which is you required to do so.
Try to understand code yourself and if you stuck somewhere then post your comment here.
I have a standard pure CSS dropdown menu that needs to be supported back to ye olde IE7. My bug is that the submenu will disappear as the user moves their mouse down the links.
GIF illustration
I have been reading about IE7 stacking contexts and it is my understanding that I should be able to set { position: relative; z-index: (something large); } on the parent element of my menu to deal with the disappearing submenu.
This has not worked for me, and I can't find anything in my page content that would have a higher z-index than the menu anyway. (For one thing, nothing actually gets painted over the menu.) Got any clues? Here is my markup (or see Codepen):
<div class="mainmenu">
<div class="row">
<a href="/" class="pull-left">
<img src="logo.png" class="logo">
</a>
<ul class="nav-main">
<li>Item 1</li>
<li>Item 2</li>
<li><a class="dropdown">Item 3 </a>
<ul class="nav-sub">
<li>Sub-Item 1</li>
<li>Sub-Item 2</li>
<li>Sub-Item 3</li>
</ul>
</li>
<li><a class="dropdown">Item 4 </a>
<ul class="nav-sub">
<li>Sub-Item 1</li>
<li>Sub-Item 2</li>
<li>Sub-Item 3</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content">
<!-- Then some page content -->
</div>
The CSS (colors removed):
.mainmenu {
position: relative;
top: 0;
z-index: 597;
width: 100%;
height: 66px;
margin: 0;
padding: 0 22px;
}
.mainmenu .logo {
height: 39px;
margin: 16.5px 0;
vertical-align: middle;
}
ul.nav-main {
margin: 0;
float: right;
padding: 0 20px;
position: relative;
top: 0;
}
ul.nav-main a,
ul.nav-main li {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
ul.nav-main li {
list-style-type: none;
padding: 22px 8px;
float: left;
}
ul.nav-main li a,
ul.nav-main li span {
display: block;
}
ul.nav-main li:hover ul {
visibility: visible;
opacity: 1;
}
ul.nav-main ul.nav-sub {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 0;
margin: 0;
top: 66px;
}
ul.nav-main ul.nav-sub li {
display: block;
float: none;
padding: 0;
outline: 1px solid #aaa;
}
ul.nav-main ul.nav-sub li a,
ul.nav-main ul.nav-sub li span {
display: block;
padding: 11px;
}
Any help would be appreciated.
ul.nav-main ul.nav-sub {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 0;
margin: 0;
top: 100%;
}
it works for me perfectly in IE7
codepen
I downloaded a template for my company. I managed to get most things done, but I want to make a drop down menu and I just can't handle it. I tried this explanation How to add drop down menu using CSS? because I don't know JavaScript or jQuery, but it doesn't seem to work on this particular template. Am I describing the wrong class in css?
HTML
</nav>
</section>
<header class="sixteen columns alpha omega">
<nav class="main-nav sixteen columns">
<ul class="ten columns alpha">
<li>Start</li>
<li>O Kancelarii</li>
<li>Zakres Usług</li>
<ul>
<li>Something You do</li>
<li>TODO</li>
</ul>
<li>Press Room</li>
<li>Kontakt</li>
</ul>
<div class="social six columns omega">
</div> <!--Close Social Div-->
</nav>
CSS
.main-nav {
margin-top: 10px;
padding-top: 3px;
padding-bottom: 3px;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
}
.main-nav li {
display: inline;
margin-right: 15px;
}
.social a:link {
float: right;
background-image: url(../img/facebook.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
margin-left: 2px;
}
.social a:last-child {
float: right;
background-image: url(../img/twitter.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
}
.social a:hover {
background-position: 0 0;
}
.main-nav li {
position: relative;
}
.main-nav ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
.main-nav li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Here is the whole css http://jsfiddle.net/9LcfX/18/
I've tried to rename the description in css from main_nav to alpha etc. but nothing.
Please help me, in advance thanks for Your time.
some structure problem in ur html code just replace html code with below code
<nav class="main-nav sixteen columns">
<ul class="ten columns alpha">
<li>Start</li>
<li>O Kancelarii</li>
<li>Zakres Usług
<ul>
<li>Something You do </li>
<li>TODO </li>
</ul>
</li>
<li>Press Room</li>
<li>Kontakt</li>
</ul>
<div class="social six columns omega"> </div>
</nav>
I'm playing around with a pure CSS accordion http://reversl.net/accordion/ I can get the basic functionality to work (headings 2 & 3 both toggle) But I can't get heading 1 to toggle if I add the same UL to it. Because Heading 1 is styled differently the problem (I think) lies within naming/targeting it's + div ?
Please note: I removed the UL from Heading 1 for the sake of the demo because it was preventing Headings 2 & 3 from toggling.
You made several mistakes. Too many to count:
Here is a working example: Try and see, what I changed
http://jsfiddle.net/HerrSerker/ASqE9/
HTML
<div id="wrap">
<div class="accordion">
<div id="two" class="section">
<h4>
Heading 2
</h4>
<div class="sub_section">
<ul class="list">
<li>Sample Text 1</li>
<li class="last">Sample Text 2</li>
</ul>
</div>
</div><!--#two-->
<div id="four" class="section progress">
<h4>
Heading 4 (With Progress Bar)
</h4>
<div class="metrics">
<div class="meter">
<span style="width: 75%"></span>
</div><!--.meter-->
</div><!--.metrics-->
<div class="sub_section">
<ul class="list">
<li>Sample Text 1</li>
<li class="last">Sample Text 2</li>
</ul>
</div><!--.sub_section-->
</div><!--#one-->
</div><!--accordian-->
</div>
CSS
#wrap {
width: 320px;
background: #f0f0f0;
margin: auto;
}
.accordion {
clear: both;
padding: 0;
margin: 0 auto;
}
.accordion h4 {
margin: 0;
}
.accordion h4 a {
padding: 1em;
color: #999;
display: block;
font-weight: normal;
text-decoration: none;
}
.accordion h4 a:hover {
text-decoration: none;
background: #111;
}
.accordion .section {
background: #222;
border-bottom: 1px solid #000;
}
.accordion .sub_section {
border-bottom: none;
background: #f0f0f0;
}
.list {
padding: 0;
margin: 0;
}
.list li {
background: url('http://www.placehold.it/40x40') no-repeat;
color: #999;
list-style: none;
padding: .7em .7em .7em 4em;
border-bottom: 1px solid #fff;
}
.list .last {
border-bottom: none;
}
.accordion .sub_section {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion :target h4 a {
text-decoration: none;
font-weight: bold;
}
.accordion :target .sub_section {
height: 80px;
}
.accordion .section.large:target h4 + div {
overflow: auto;
}
.accordion p {
color: #646464;
}
.accordion .progress .meter {
width: 90%;
height: 2px;
position: relative;
background: #555;
margin: -.9em auto .5em auto;
padding: 1px;
}
.meter > span {
height: 2px;
display: block;
background-color: #f0f0f0;
position: relative;
overflow: hidden;
}
This is because the class "progress" assigned to the div id="one" that keeps constant the size of the div with the content.