I have a little problem with my vertical navigation:
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
...
</div>
My CSS:
.menu-container a{
text-decoration:none;
color:black;
}
.menu-container a:hover{
font-weight:bold;
}
.menu-container li:hover > .sub-menu{
display:block;
}
.sub-menu{
display:none;
list-style-type:none;
padding:6px;
}
ul.sub-menu a{
text-decoration:none;
}
.menu-container > ul.sub-menu a{
display:block;
background:#ddd;
}
.menu-container > .sub-menu:active{
display:block;
background:#ddd;
}
If I hover the menu the sub-menu show up. Now, in addition I would like, that if e.g. the submenu1 is active that the whole submenu stays openend. Can I realize that with CSS?
Greets,
Yab86
Here's an example using PHP. You need to create a page variable before the <html> like this:
<?php $page = 'menu1'; ?>
<html>
<!-- rest of HTML below here-->
That php code gets put on top of every submenu page that shares a common main parent menu. So in your example, submenu1, submenu2, and submenu3 would have the same variable. In this example, menu1. What this does, is allows you to add a CSS class of current to the submenu parent ul.
Here's the HTML with the PHP in place:
<?php $page = "menu1"?>
<html>
<head></head>
<body>
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu <?php if($page == 'menu1')echo 'current'; ?>">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2
<ul class="sub-menu <?php if($page == 'menu2')echo 'current'; ?>">
<li>Submenu4</li>
<li>Submenu5</li>
<li>Submenu6</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
And here's the CSS that would keep it open:
.menu-container li:hover > .sub-menu,
.menu-container .current {
display:block;
}
When the HTML outputs to the browser, this is what it would actually look like if you were on any of the submenu1,2,3 pages:
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu current">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2
<ul class="sub-menu">
<li>Submenu4</li>
<li>Submenu5</li>
<li>Submenu6</li>
</ul>
</li>
</ul>
</div>
Hopefully this helps you out.
Related
I have a navpar made by css but when show the navbar sub menu it pushes the content underneath down
This is a link to codepen with full code
https://codepen.io/muhamedhashem/pen/GqNQaE
image
html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="nav">
<ul>
<li>One</li>
<li>
<a href="#">
Two
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Two #1</li>
<li>Two #2</li>
<li>Two #3</li>
</ul>
</li>
<li>
<a href="#">
Three
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Three #1</li>
<li>Three #2</li>
<li>Three #3</li>
</ul>
</li>
<li>
<a href="#">
Four
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
</ul>
</li>
<li>
<a href="#">
Five
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Five #1</li>
<li>Five #2</li>
<li>Five #3</li>
</ul>
</li>
</ul>
</div>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
</body>
</html>
css
.nav {
width:900px;
margin: 0 auto}
ul{
margin: 0;
padding: 0;
list-style-type:none;
text-align:center;}
ul li{
float:left;
width:180px;}
li ul{ display:none;}
li:hover ul{
display:block;}
ul li a{
display:block;
padding: 5px 15px 5px 15px;
background:#69F;
color:#ffffff;
border-top: 1px solid #FFF;
margin-left:1px;}
ul li a:hover{
background:#F80;
color:#fff}
h1 {
clear:both;
}
This is because the navbar itself is growing in height. If you want the navbar to overlap the content, look into z-index and absolute display.
li:hover ul{
position:absolute;
z-index: 10; //can be any number higher than the content's z-index.
width: 180px; //This controls the size of the dropdowns container
display:block;
}
Your sub-menu needs to be set to position absolute and your parent LI needs to be set to position relative. You should set visibility to hidden and then show it for :hover. This method will not push down content.
Also, you need to make sure that you set a width to the ul li ul <--- submenu.
I currently have a side menu. I'd like it if the user hovers over the Manage Contracts button the sub menu then appears. I've created two ul's - the primary menu and a sub menu ul. The reason being because I don't want the sub menu inheriting the styles from the primary menu if that makes sense? However at the moment I can't get the the menu to appear when the mouse is over the Manage Contract button. Any ideas?
the html:
<div id="navbar-side">
<div id="profile-image">
</div>
<div id="menu-search">
<input type="text" name="search" id="search" placeholder="Search..." />
</div>
<ul id="side-menu">
<li>Dashboard</li>
<li>Manage Contracts</li>
<li>Manage Duplicates</li>
<li>PPM Manager</li>
<li>Service User Search</li>
<li>My Subscriptions</li>
<li>Help Centre</li>
</ul>
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</div>
the css:
#side-menu
{
width:100%;
position:relative;
}
#side-menu li
{
display:block;
border-bottom:solid 1px black;
}
#side-menu a
{
display:block;
border-top:solid 1px white;
padding:18px 0;
}
#side-menu a:hover
{
background-color:Silver;
}
#contracts-menu
{
display:none;
width:200px;
height:300px;
background-color:Aqua;
margin-left:228px;
position:absolute;
top:87px;
}
#contracts-menu li
{
display:block;
}
#contracts-menu a
{
display:block;
}
a#contracts:hover + #navbar-side ul#contracts-menu
{
display:block;
}
That's because a#contracts and div#navbar-side are not siblings!
You can't use + and/or ~ selectors on non-sibling elements.
On the other hand, there's no parent selector in CSS (yet).
You could use JavaScript to achieve this or change your markup structure, as follows:
<li>Manage Contracts
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</li>
CSS:
a#contracts:hover + ul#contracts-menu {
display:block;
}
JSBin Demo.
Update
But in this case, There's no need to set id attriute on each link/item.
You could nest the sub-menus in each list item and display them as follows:
#side-menu li:hover > ul { /* Select the ul children inside each list-item */
display:block;
}
JSBin Demo #2
If you don't want to use javascript, you could put the ul#contracts-menu inside the list-item that contains the #contracts anchor:
<div id="navbar-side">
<div id="profile-image">
</div>
<div id="menu-search">
<input type="text" name="search" id="search" placeholder="Search..." />
</div>
<ul id="side-menu">
<li>Dashboard</li>
<li id="contracts">
Manage Contracts
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</li>
<li>Manage Duplicates</li>
<li>PPM Manager</li>
<li>Service User Search</li>
<li>My Subscriptions</li>
<li>Help Centre</li>
</ul>
</div>
Add the id to the list item (instead of the anchor) and then add:
#side-menu li.contracts:hover #contracts-menu { display:block; }
See: http://jsfiddle.net/FmR3f/
I am trying to create a dynamic unordered list that is built for 3 list items however there maybe either one or two items in that list. My problem is that when there are one or two items in UL my contents get shifted up. How can I avoid this ?
HTML:
<html><head>
<title>Dashboard</title>
</head>
<body>
<div id="wrapper">
<div id="colDow">
<div id="colLef">
<ul id="days">
<div id="colRig">
<ul class="format" id="schedule1">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
<ul class="format" id="schedule2">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
<ul class="format" id="schedule3">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
</div><!-- Bottom Right Time -->
</div>
</div>
CSS:
body {
padding:0;
margin:0;
background-color:#000;
font-size:100%;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:100%;
height:100%;
max-width:2560px;
max-height:1440px;
}
#colDow {
width:55.46%;
/* 710/1280 */
float:left;
height:88.75%;
/* 710/800 */
}
#colLef {
width:35.21%;
/* 250/710 */
float:left;
height:100%;
}
#days {
list-style-type:none;
padding-left:0px;
}
#days li {
font-size:2.25em;
color:#fff;
font-family:'Lato',sans-serif;
font-weight:lighter;
margin:0 0 168px;
background:#575757;
display:block;
text-align:center;
height:40px;
margin-top:6px;
margin-bottom: 168px;
}
#colRig {
/* background:#fff; */
width:63.09%;
float:right;
height:100%;
}
.format {
/* background:red; */
margin-top: 46px;
padding-bottom: 6px;
}
.format li {
color:#fff;
font-family:'Lato',sans-serif;
font-weight:lighter;
font-size:1.5em;
/* font-size: 1.846em; */
height: 52px;
}
If you remove the first occurrence of "Event3" items get shifted up
markup
<div class="event-listing">
<ul>
<li>
<a>List 1</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
<li>
<a>List 2</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
<li>
<a>List 3</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
</u>
</div>
css
.event-listing ul li {
list-style: none;
}
This is what i understood from your menu. Let me know if im wrong
.event-listing ul {
min-height: 100px //set a minimum height
}
Set a minimum height so your list areas won't get shifted up. Sorry code not in tags. I'm mobile right now.
this is my html code:-
<div id="load">
<ul>
<li>Activities
<div>
<ul>
<li>Physical1
<div>
<ul>
<li>Cricket
<div>
<ul>
<li>One Day</li>
</ul>
</li>
</ul>
</li>
<li>Test1
<div>
<ul>
<li>Test At Abc</li>
</ul>
</li>
<li>Test2
<div>
<ul>
<li>Test At Xyz</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
this is my css:-
li{
color:red;
border-left:1px solid green;
}
li{
list-style:none;
}
ul > li > div > ul {
display: none; // hide all submenus
}
li:hover > div > ul {
display: block; // show sub menu when parent li is hovered
}
now i want to something this type of my list:-
i think using proper position css style its done.
or with float i think its possible.
any kind help well come...
thanks...
How can I change another class's property when one's hovering.
If I say I have A and B class, A has hover event, If I want to change inside of B when A hover, how can I do?
A:hover {}
B{ color:#FFF; }
A:hover + B{ color:#000; } didnt work
Actually CSS
.has_child is inside of .navi
.navi > ul > li:hover
+ .navi > ul > li > .has_child:after {
color: #09F;
}
HTML
<nav class="navi ">
<ul>
<li style="height:8px; width:8px; padding:0px; margin:0px;">
</li>
<li>
General Config
</li>
<li>
Menu
<ul>
<li style="height:8px; width:8px; padding:0px; margin:0px;">
</li>
<li>
English
</li>
<li>
</li>
</ul>
</li>
<li>
User Level
</li>
<li>
User
</li>
<li>
Tag
</li>
<li>
Log
</li>
<li>
</li>
</ul>
</nav>
Thank you very much for your advice.
==============
Update
Seem like + operator will nor work if have > before.
A:hover + B{ color:#000; } will work fine.
A:hover + C > B{ color:#000; } will not work.
Works for me.
You should check your selectors. What browser are you using?
.A must be inside .B
<div class="A">
<div class="B">
something
</div>
</div>
then in your stylesheet:
.A:hover .B { some css code }