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">
Related
I have a menu with a drop down that works nicely but the issue I noticed is if you hover a link with a child element, it opens the menu, but the link then become unclickable on the menu on the bottom half.
<div class="desktop_navigation">
<ul>
<li>Link 1</li>
<li>Link 2
<ul>
<li>Link 2 child</li>
</ul>
</li>
<li>Link 3</li>
</ul>
</div>
That's the structure for the menu. The child elements are sub <ul> of the main <li> and then hidden using CSS until their parent <li> is hovered.
The following jFiddle will include all the CSS I am using and a working example of the issue I am currently having:
https://jsfiddle.net/nrzfa49s/
Your .desktop_navigation ul li ul is inheriting the padding-top: 30px from its parent ul (.desktop_navigation ul) which is covering the parent link (Link 2) making it unclickable.
To fix your problem, update these styles:
.desktop_navigation ul li ul {
list-style: none;
display: none;
padding-top: 0; /*remove the 30px padding*/
}
.desktop_navigation ul li:hover ul {
display: block;
position: absolute;
top: 100%; /*set your top value to be more dynamic based on the height of the parent*/
z-index: 890;
}
Here is a fiddle demoing this solution.
Normally when you style menus like this it is recommended to use the > when styling menu elements because of the nesting (i.e. .desktop_navigation > ul this will prevent the child ul from inheriting the padding)
Took some time, but the issue is here:
.desktop_navigation ul {
list-style: none;
padding: 0;
margin: 0;
padding-top: 30px; //remove this line
}
You only want the padding-top for the ul's to be on the parent/top-level menu. Then if you remove the top attribute from the nested menus, they will display after the link in the top-level menu.
.desktop_navigation a {
color: #ccc;
text-decoration: none;
display: inline-block;
padding: 12px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.desktop_navigation ul li:hover a {
color: #fff;
background: #444;
text-decoration: none;
display: inline-block;
z-index: 1002;
padding: 12px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.desktop_navigation ul li ul li a:link,
.desktop_navigation ul li ul li a:visited,
.desktop_navigation ul li ul li a:active {
z-index: 1001;
width: 100%;
display: block;
color: #444;
background: #fff;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.desktop_navigation ul li ul li a:hover {
width: 100%;
display: block;
color: #111;
z-index: 1002;
background: #ccc;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.desktop_navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.desktop_navigation > ul {
padding-top: 30px;
}
.desktop_navigation ul li {
display: inline-block;
position: relative;
padding: 0;
margin: 0;
z-index: 1002;
}
.desktop_navigation ul li ul {
list-style: none;
display: none;
}
.desktop_navigation ul li:hover ul {
display: block;
position: absolute;
z-index: 890;
}
.desktop_navigation ul li ul li {
float: none;
position: relative;
min-width: 180px;
z-index: 890;
}
<div class="desktop_navigation">
<ul>
<li>Link 1</li>
<li>
Link 2
<ul>
<li>Link 2 child</li>
</ul>
</li>
<li>Link 3</li>
</ul>
</div>
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 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..
If you see the attached jsfiddle and if you hover over the dashboard , it turns black. I want the text "Dashboard" to turn black on just the hover of the <ul> and not the <p> tag. Is this possible? And can I make it stay active so that the user knows he is on the current page?
<div>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name"></li>
</ul> <a href="#">
<ul class="left">
<li style="margin:10px;"><p style="color:white;">Dashboard</p></li>
</ul>
</a>
</nav>
Change the .top-bar ul:hover to .top-bar ul:hover p, give it a padding, and you should be good to go
EDIT: Here are the changes:
Your code:
.top-bar {
height: 55px;
background: #454545 !important;
}
.top-bar ul {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
.top-bar ul:hover, .top-bar ul li p:hover, .top-bar:last-child {
background: #C3C3C3;
color: black !important;
}
.top-bar ul li p:hover {
color: black !important;
}
The edited code:
.top-bar {
height: 55px;
background: #454545 !important;
}
.top-bar ul {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
.top-bar ul p {
padding:5px; /* Added padding to make it look more like a button */
}
.top-bar ul:hover p, .top-bar:last-child { /* changed .top-bar ul:hover to .top-bar ul:hover p and removed .top-bar ul li p:hover */
background: #C3C3C3;
color: black !important;
}
.top-bar ul li p:hover {
color: black !important;
}
In my code, I have a drop-down menu. However, the grey box extends to the end of the screen. How can I limit the grey box?
Code from here: http://cssdeck.com/labs/7rsznauv
HTML:
<nav>
<ul class="cf">
<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>
</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;
}
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 90%; // I made it 90% you can make it even narrower
}
Just reduce the width by reducing the percentage or like width: 180px;
just change the width in hnav ul{....}, actually is 100%, change it to 50% or whatever you want