I am creating a demo for my homework.
My navigation is not displaying correctly. I have been trying to fix the problem in many ways but none of them work.
demo
here is my demo
<body>
<div class="container">
<div class="content">
<div id="menu">
<ul class="parent-menu">
<li>
Home & Kitchen
<ul>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>
Electronics
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>
Clothing
<ul>
<li>item</li>
<li>item</li>
<
</ul>
</li>
<li>
Cars & Motorbikes
<ul>
<li>item</li>
<li>item</li>
<
</ul>
</li>
<li>
Books
<ul>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>
Support
<ul>
<li>
Contact Us
</li>
<li>
Forum
</li>
<li>Deliveries</li>
<li>T&C</li>
</ul>
</li>
</ul>
</div>
<!-----------Shorcut Panel Content--------->
<div class="shortcutpanel">
<div class="usergroup">
</div>
</div>
</div>
</body>
Here is my CSS code.
/* Basic Style */
html, body{
height:100%;
}
body {
background-color: grey;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-size:cover;
}
/*Global Setting*/
.hover{
float:left;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
}
.hover:active, .hover:hover, .hover:focus{
background-color: rgba(32, 152, 209, 0.5);
}
.container{
height:100%;
width:100%;
}
.content{
position:fixed;
top:10%;
left:0%;
height:90%;
width:100%;
}
/* NAVIGATION*/
p, ul, li, div, nav { padding:0; margin:0; }
#menu {
overflow: hidden;
position:fixed ;
left:0%;
top:20%;
z-index:999; }
.parent-menu {
background-color: #0c8fff;
width:180px; }
#menu ul {
list-style-type:none;
}
#menu ul li a {
padding:10px 15px;
display:block;
color:#fff;
text-decoration:none;
}
#menu ul li a:hover {
background-color:#007ee9;
}
#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: 999;
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;
}
#menu ul li a:focus + 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;
}
/* Shortcut Panel Content */
.shortcutpanel{
position:relative;
left:10%;
top:5%;
height:90%;
width:30%;
float:left;
margin:0;
padding:0;
background-color:rgba(255,240,240,0.1);
}
Here this Demo,its the navigation effect that i want.
But however in my first demo.When you hover over the navi menu, the 2nd level menu will come out but display incorrectly. I don't know how to solve this.
Thanks for helps guys
If i get your question right.. U can do that by width animation..
And change :focus to :hover + ul
DEMO FIDDLE
#menu ul li:hover > ul {
left: 200px;
width: 200px;
}
#menu ul li > ul {
width: 0px;
}
#menu ul li a:hover + ul {
width: 200px;
-webkit-transition: width 300ms ease-in;
-moz-transition: width 300ms ease-in;
-ms-transition: width 300ms ease-in;
transition: width 300ms ease-in;
}
Hope it helps..
Related
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 been following a tutorial online about creating a sidebar and i have run into an issue. When i hover over one of the menus a sub menu appears. But if i put anything to the right of the menu the sub menu does not appear only when you put the mouse over it. I want the menu to appear over the text to the right of the sidebar
The menu works perfectly when nothing is to the left (e.g. overflow:auto;)
Here is a jfiddle example of the issue
HTML
<nav id="sidebar-menu">
<ul class="parent-sidebar-menu">
<li>Home & Kitchen
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Electronics
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul></li>
<li>Clothing
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul></li>
<li>Cars & Motorbikes
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Books
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Support
<ul>
<li>Contact Us</li>
<li>Forum</li>
<li>Deliveries</li>
<li>T&C</li>
</ul>
</li>
</ul>
</nav>
</div>
<div align="top">
<p>this is just a test</p>
</div>
CSS
p, ul, li, div, nav
{
padding:0;
margin:0;
}
body
{
font-family:Calibri;
}
#sidebar-menu {
overflow: visible;
position:relative;
z-index:2;
}
.parent-sidebar-menu {
background-color: #0c8fff;
min-width:200px;
float:left;
}
#sidebar-menu ul
{
list-style-type:none;
}
#sidebar-menu ul li a
{
padding:10px 15px;
display:block;
color:#fff;
text-decoration:none;
}
#sidebar-menu ul li a:hover
{
background-color:#007ee9;
}
#sidebar-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;
}
#sidebar-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;
}
#sidebar-menu ul li > ul li a:hover
{
background-color:#2e2e2e;
}
Does anyone know how to fix this?
Your sub-menu actually is showing up; it's just the background color that doesn't show up. Right now, you have the background color applied the sub-menu's UL. If you instead apply the background-color to the LIs within that UL, it fixes the issue (I think this might be because of the UL's very low z-index?).
Anyway, here's the CSS rule to add:
#sidebar-menu ul li > ul li {
background-color: #333;
}
You can then remove the background-color from #sidebar-menu ul li > ul since it doesn't do anything.
The issue is that you have a z-index of -1 (so behind everything) on the CSS for your rollover.
Changing the Z-index of the #sidebar-menu ul li > ul to 100 and the z-index of the #sidebar-menu to 200 fixes it.
This should be your CSS:
p, ul, li, div, nav
{
padding:0;
margin:0;
}
body
{
font-family:Calibri;
}
#sidebar-menu {
overflow: visible;
position:relative;
z-index:200;
}
.parent-sidebar-menu {
background-color: #0c8fff;
min-width:200px;
float:left;
}
#sidebar-menu ul
{
list-style-type:none;
}
#sidebar-menu ul li a
{
padding:10px 15px;
display:block;
color:#fff;
text-decoration:none;
z-index:100;
}
#sidebar-menu ul li a:hover
{
background-color:#007ee9;
}
#sidebar-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;
}
#sidebar-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;
}
#sidebar-menu ul li > ul li a:hover
{
background-color:#2e2e2e;
}
I have a vertical menu and when i add content to the page the added content is coming below the menu.I want to prevent the content from falling over.Expecting help from experts here.
In the given example i want demo in same line as my menu.
p, ul, li, div, nav
{
padding:0;
margin:0;
}
body
{
font-family:Calibri;
}
#menu {
overflow: auto;
position:relative;
z-index:2;
}
.parent-menu
{
background-color: #0c8fff;
width:200px;
}
#menu ul
{
list-style-type:none;
}
#menu ul li a
{
padding:10px 15px;
display:block;
color:#fff;
text-decoration:none;
}
#menu ul li a:hover
{
background-color:#007ee9;
}
#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;
}
.content {
padding: 12px 12px 12px 12px;
font-size: 0.8em;
line-height: 1.65em;
border-left: 1px solid #bdc1a3;
border-right: 1px solid #bdc1a3;
background-color:#ffffff
}
#dataDiv{
float: left;border:1px solid #bdc1a3;background-color:#f3f5dc;
}
<div class="content">
<div id="menu" style="overflow:hidden">
<ul class="parent-menu">
<li><a href='#'><span>Menu1</span></a>
<ul>
<li><a href='#'><span>SubMenu1</span></a></li>
<li><a href='#'><span>SubMenu2</span></a></li>
</ul>
</li>
<li><a href='#'><span>LOG OUT</span></a></li>
</ul>
</div>
<div id="dataDiv" style="overflow:hidden">
<table>
<tr>
<td style="background-color: #0C9FFF">
Demo
</td>
</tr>
</table>
</div>
Your menu is in a div, which is a block-level element so it takes up the entire width of it's parent element and will push the following content underneath it.
One way to achieve what you're trying to do is to add float: left to your #menu.
Use the style attribute float.
https://jsfiddle.net/4g5tLekm/7/
Modify <div id="menu" style="overflow:hidden"> to <div id="menu" style="overflow:hidden;float:left">
So I have a pure css dropdown menu, but I'm having one problem. The dropdown works when you hover over a link, but it's also triggering when you hover over the actual container that contains the dropdown portion. Here's a jsfiddle with the code. http://jsfiddle.net/9BRac/
<div class="nav-con">
<nav role='navigation' id="nav">
<ul>
<li id="linked">Home</li>
<li>About
<ul class="dropdown">
<li>Link 1.</li>
<li>Link 2.</li>
<li>Link 3</li>
</ul>
</li>
<li>Clients
<ul class="dropdown">
<li>Link 1.</li>
<li>Link 2.</li>
<li>Link 3</li>
</ul>
</li>
<li>Contact Us
<ul class="dropdown">
<li>Link 1.</li>
<li>Link 2.</li>
<li>Link 3</li>
</ul>
</li>
</ul>
</nav>
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav {
width: 100%;
height: 60px;
background-color:black;
border-bottom: #ffd600 solid 10px;
margin: 0 auto;
}
nav ul {
position:inheirt;
}
nav ul li {
transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
width: 80px;
height:60px;
margin-left:10px;
display:;
float: left;
line-height: 60px;
text-align:center;
list-style:none;
position:inherit;
color: white;
text-decoration:none;
}
nav ul li:hover {
width: 80px;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
height:60px;
margin-left:10px;
background-color:#ffd600;
float: left;
line-height: 60px;
text-align:center;
list-style:none;
position:inherit;
color: white;
text-decoration:none;
}
nav ul li a {
color: white;
text-decoration:none;
}
html {
background-color: #f2f2f2;
}
#dropdown {
width:100%;
height:200px;
opacity: 0.8;
background-color:black;
display:none;
}
.dropdown {
margin-top:10px;
}
.dropdown li {
width: 300px;
background-color: #ffd600;
}
nav ul ul {
opacity: 0;
transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in
}
nav ul li:hover > ul {
opacity: 0.8;
transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
}
nav ul ul li {
opacity: 1.0 !important;
}
nav ul ul li:hover {
width: 350px !important;
}
Use the following
/* Your dropdown */
nav ul ul {
opacity: 0;
visibility:hidden;
transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
-webkit-transition: opacity .6s ease-in
}
/* Code to display your dropdown */
nav ul li:hover > ul {
opacity: 0.8;
visibility:visible;
}
For a working example go here http://jsfiddle.net/DanielApt/9BRac/12/
Explanation:
Your .dropdown still exists, it just has an opacity of 0.
Whenever you hover over this “invisible” .dropdown you trigger the hover styling for its parent li, which leads to showing .dropdown again.
The solution: set a visibility of hidden for your .dropdown, and set the visibility to visible only when you hover over the parent li
Also only use the transition on the opacity property, then visibility is changed immediately, but the opacity transitions smoothly.
PS: If you're curious why I'm not using display:none, it is because you can't transition display (source for the solution using visibiliy
Try using visibility:hidden instead of editing just the opacity on hover like this:
http://jsfiddle.net/9BRac/18/
Now you can edit a bit the transitions timing to make it smoother.
As well the transition property could be used on opacity only and not on all properties.
The submenu is not displaying under the parent item, whereas on the left. Tried to take the absolute off, and on, but it does not seem to make any effect.
JS fiddle here: http://jsfiddle.net/42qg5/
HTML
<div id="menu">
<div class="container">
<ul>
<li>Home
</li>
<li>About SRJC
</li>
<li>Admission
</li>
<li>The SR Programmes
</li>
<li>CCAs
</li>
<li>Portals
<ul class="submenu">
<li>ASPIRE
</li>
</ul>
</li>
<li>Staff & Parents
</li>
</ul>
</div>
</div>
CSS
#menu ul li ul li {
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
margin: 0;
padding: 0;
border: none;
outline: none;
}
Here is updated Fiddle with code.
Fiddle
#menu ul li ul {
padding-left: 10px;
padding-right: 10px;
height: auto;
width: 100px;
background-color: #e13393;
border-bottom: 2px solid #fcc402;
display: none;
z-index: 999;
position:absolute;
left:0;
top:30px;
}
#menu li {
display: inline;
color: #fff;
position:relative;
}