I want to make a menu like this :
and here what I have done so far :
<nav class="container site-navigation clearfix">
<ul id="menu-main-menu" class="main-menu">
<li id="menu-item-7" class="current-menu-item current_page_item">
Home
</li>
<li id="menu-item-50" class="menu-item menu-parent-item">
Teaching
<div class="sub-menu-outer">
<div class="sub-menu-inner">
<ul class="sub-menu">
<li id="menu-item-75" class="menu-item">
Description
</li>
<li id="menu-item-84" class="menu-item">
Papers
</li>
<li id="menu-item-82" class="menu-item">
Tasks
</li>
<li id="menu-item-83" class="menu-item">
<a href="http://localhost/artech/teaching/log-in/">Log In
</a>
</li>
</ul>
</div>
</div>
</li>
<li id="menu-item-21" class="menu-item">
Creative Technology
</li>
<li id="menu-item-20" class="menu-item">
Blog</li>
<li id="menu-item-19" class="menu-item">Bio
</li>
<li id="menu-item-18" class="menu-item">
Contact
</li>
</ul>
</nav>
and the css :
ul{list-style: none; padding: 0; margin: 0;}
nav{
background: url(http://img29.imageshack.us/img29/3563/6s9a.png) repeat-x bottom left;
height: 44px;
}
#menu-main-menu > li{position: relative; float:left;}
#menu-main-menu > li:not(:first-child){
margin-left: 70px;
}
#menu-main-menu li a{color: #000000; line-height: 35px;}
#menu-main-menu .current-menu-item a,#menu-main-menu .current_page_item a, #menu-main-menu > li:hover a{
font-weight: 700;
}
#menu-main-menu > li:hover ul.sub-menu li a{
font-weight: 400;
}
#menu-main-menu > li:hover ul.sub-menu li:hover a{
font-weight: 700;
}
.sub-menu-outer{background: url(http://img12.imageshack.us/img12/5050/3g1y.png) repeat-y top right #FFFFFF;
} /* two line stripe y*/
.sub-menu-inner{
background: url(http://img12.imageshack.us/img12/5050/3g1y.png) repeat-y top left;
} /* two line stripe y*/
.sub-menu{
background: url(http://img29.imageshack.us/img29/3563/6s9a.png) repeat-x bottom left;
} /* one line stripe x*/
.sub-menu > li{
padding: 5px 15px;
text-align: center;
}
#menu-main-menu > li.menu-parent-item .sub-menu-outer {
display: none;
float: left;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
}
#menu-main-menu > li.menu-parent-item:hover > .sub-menu-outer{
display: block;
z-index: 1000;
}
http://jsfiddle.net/JY8k5/4/
I have the follow problems that couldn't solve my self :
The right and left y-stripes has to start form the begging of parent li and ending at the end of the sub-menu without covering (I have a white background) the parent's li word / page link.
The x-stripe at the bottom of the sub-menu has to be over the left and right stripes as the foto shows
The sub-menu has to be centered base the widht of parent
Is it possible to solve all this only with css or I have to use jquery. I try a lot especially with the positions but couldn't achieve the desired results.
Any help is very appreciate.
I manage to solve it somehow. I change my html markup to :
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item menu-item-22">
Teaching
<div class="sub-menu-wrapper" style="margin-left: -75px;"> // This style has been put by jquery
<ul class="sub-menu">
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
Description
</li>
// more li's here
</ul>
</div>
</li>
the css :
.sub-menu-wrapper{
background: url(../img/stripe.png) repeat-x bottom left #FFFFFF;
padding-bottom: 9px;
}
.sub-menu-wrapper ul.sub-menu{
background: url(../img/double-stripe.png) repeat-y top right;
}
.sub-menu-wrapper ul.sub-menu > li{
padding: 5px 15px;
text-align: center;
background: url(../img/double-stripe.png) repeat-y top left;
}
.sub-menu-wrapper ul.sub-menu li:first-child{
padding-top: 36px;
}
#menu-main-menu > li.menu-parent-item .sub-menu-wrapper {
display: none;
width: 115%;
min-width: 150px;
float: left;
position: absolute;
left: 50%;
top: -28px;
margin-top: 35px;
z-index: 40;
}
#menu-main-menu > li.menu-parent-item:hover > .sub-menu-wrapper{
display: block;
z-index: 10;
}
#menu-main-menu > li.menu-parent-item a{
position: relative;
z-index: 50;
}
and lastly the js :
$(".menu-parent-item").hover(function(){
var subMenu = $(this).children(".sub-menu-wrapper");
var parentWidth = $(this).width();
var subMenuWidth = parentWidth * 1.15; // because .sub-menu-wrapper width is 115%
var margin = 0;
if(subMenuWidth <= 150){
margin = -75;
}else{
margin = (( subMenuWidth / 2 )) *(-1);
}
subMenu.css("margin-left", margin);
});
I couldn't find a css way (except to add a div with min-width and fake a min-margin) to center the submenu so I did it with jquery.
Related
I'm trying to make it so when you hover over one of the categories in the header nav "CALLS | CHATS | MORE" the subnav below shows and the ul that is associated with the header nav changes its background color i know i can just add a class using jQuery but could i not do this with a sibling selector or something? i just think my HTML is layed out incorrectly at the moment for it to work TIA. this is what i currently have.
<header class="header">
<ul class="header__nav">
<li class="header__navItem header__navItem--calls">Calls</li>
<li class="header__navItem header__navItem--chats">Chats</li>
<li class="header__navItem header__navItem--more">More</li>
</ul>
<nav class="navigation">
<div class="navigation__wrapper cf">
<ul class="navItems navItems--calls">
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<div class="bgHover"></div>
</ul>
</div>
</nav>
</header>
.header {
height: 5.8rem;
background: rgba(25, 25, 25, 0.9);
position: absolute;
width: 100%;
z-index: 999;
&__nav {
display: inline-block;
text-align: center;
font-size: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
padding: 0;
margin: 0;
}
&__navItem {
color: $white;
display: inline-block;
#include font-size(18);
padding: 0 4rem;
line-height: 5.8rem;
letter-spacing: 0.1rem;
position: relative;
cursor: default;
font-weight: 400;
text-transform: uppercase;
font-family: $lato;
&--calls {
&:hover ~ .navigation__wrapper .navItems .bgHover {
max-height: 35rem;
}
&:hover {
color: red;
}
}
}
I'm presuming you want the submenu to appear below the header nav. If so, then move your sub nav into the li tag for the corresponding header item, like so:
<li class="header__navItem header__navItem--calls">Calls
<ul class="navItems navItems--calls">
<li class="navItems__item">First</li>
<li class="navItems__item">Second</li>
<li class="navItems__item">Third</li>
<li class="navItems__item">Fourth</li>
</ul>
</li>
I have a drop down menu button that turns grey when hovered over. However, the grey does not expand throughout the whole button, but stops at the where I set the padding.
HTML:
#dropdown {
list-style: none;
display: none;
position: absolute;
background-color: #fff;
padding: 10px;
z-index: 99999;
width: 230%;
}
#dropdown li:hover,
#dropdown li:active {
background-color: #e3e3e3;
}
#dropdown.active, #menu:target #dropdown {
display: block;
}
<ul class="main-nav js--main-nav">
<li id="menu">
Help▾
<ul id="dropdown">
<li>Give</li>
<li>Get Help</li>
<li>Get Involved</li>
</ul>
</li>
</ul>
What I want is for the grey to take up all of the drop-down menu when hovered over, as opposed to just stopping at the padding.
EDIT: I should have clarified, when I meant I want it to take up "all" of the drop down menu, I meant just the "li" when I hover over that.
Is this what you were looking for?
#dropdown {
list-style: none;
display: none;
position: absolute;
background-color: #fff;
padding: 10px;
z-index: 99999;
width: 230%;
}
#dropdown:hover {
background-color: #eee;
}
#dropdown li:hover,
#dropdown li:active {
background-color: #e3e3e3;
}
#dropdown.active, #menu:target #dropdown {
display: block;
}
<ul class="main-nav js--main-nav">
<li id="menu">
Help▾
<ul id="dropdown">
<li>Give</li>
<li>Get Help</li>
<li>Get Involved</li>
</ul>
</li>
</ul>
Having trouble getting the drop-down menus to be directly aligned with the parent ones - at the moment they always fall from the center of the top one, see image.
My code:
body {
background: url('body-bkg.jpg');
background-repeat: no-repeat;
background-position: center top;
}
#navMenu {
margin: 0;
padding: 0;
text-align: center;
}
/*controls top parent box in navigation bar*/
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: inline-block;
}
/*controls top parent box in navigation bar*/
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
background-color: hsla(0, 9%, 202%, 0.7);
float: left;
}
#navMenu ul li {
position: relative;
}
/*controls link text parent and children boxes in navigation bar*/
#navMenu ul li a {
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #2e1c1c;
border: 1px solid #000;
}
/*controls children boxes in navigation bar*/
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
/*controls children boxes in navigation bar when hovered on parent box*/
#navMenu ul li:hover ul {
visibility: visible;
}
/*controls parent box when hovered on children box*/
#navMenu li:hover {
background: #387cf7;
}
/*controls child box when hovered on child box*/
#navMenu ul li:hover ul li a:hover {
background: white;
}
<div id="navMenu">
<ul>
<li>Destinations
<ul>
<li>Asia </li>
<li>Africa </li>
<li>Europe </li>
<li>North America </li>
<li>South America </li>
<li>Antartica </li>
</ul>
</li>
<li>Holiday Types
<ul>
<li>Short Breaks </li>
<li>Beaches </li>
<li>Adventure </li>
<li>Walking </li>
<li>Continents </li>
<li>Safari </li>
<li>Cruise </li>
<li>Family </li>
<li>Ultimate </li>
</ul>
</li>
<li>When to go
<ul>
<li>Winter </li>
<li>Spring </li>
<li>Summer </li>
<li>Autumn </li>
</ul>
</li>
<li>Corporate </li>
<li>Special Offers </li>
<li>About Us </li>
<li>Blog </li>
<li>Contact </li>
</ul>
</div>
This solution may work for you:
Demo Fiddle
I see you're using visibility:hidden a lot, but In situations like this I find display: none to be easier to work with.
CSS:
#navMenu ul ul {
// current styles
left: 0px;
}
When the menu "product" is clicked or mouse over, the another list of menus appear.. but the image block which is below the menu bar, moves away from the position. if i use css [ position:absolute;], then the image box remains static and the product's sub-menu overlaps the image block, which is what i wanted. but the image blocks width & height settings change drastically, thereby spoiling the alignment.
pls chk the codings in jsFiddle
.home_menu {
border: 1px solid black;
width: 98%;
height: 3.3%;
margin-right: auto;
margin-left: auto;
}
div#menuDemo {
clear: both;
//border:1px solid black;
height: 78%;
width: 100%;
position: relative;
left: 0;
top: 0;
background-color: #A55927;
/*Remove this next one in production - Used for demo purpose only*/
margin-bottom: 0.1%;
padding-top: 0.7%;
z-index: 4;
}
div#menuDemo ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #A55927;
}
div#menuDemo > ul > li {
float: left;
text-align: center;
}
div#menuDemo ul li {
width: 25%;
//border: 5px solid purple;
}
div#menuDemo ul li a {
text-decoration: none;
font-weight: bolder;
text-align: center;
}
div#menuDemo > ul > li > ul {
display: none;
text-align: center;
}
div#menuDemo > ul > li:hover > ul {
display: block;
text-align: center;
}
.sub1 {
width: 100%;
//border:1px solid green;
}
.colouring {
color: black;
font-weight: bolder;
}
.colour {
//border:1px solid blue;
color: black;
text-align: center;
//width:100%;
}
.wrapper {
border: 5px solid pink;
width: 98.8%;
height: 82%;
margin-top: 1%;
z-index: 2;
}
.uniform_block {
border: 5px solid green;
width: 100%;
height: 40%;
cursor: pointer;
}
.uniform_block img {
width: 100%;
height: 100%;
}
<body>
<div class="home_menu">
<div id="menuDemo">
<ul>
<li id="homeMenu">About Us
</li>
<!-- <li >About Us</li> -->
<li>Products
<ul class="sub1">
<li> Uniforms
<ul>
<li>  
</li>
<li> Automobile Industry Uniforms
</li>
<li> Pharmaceutical Uniforms
</li>
<li> Food Industry Uniforms
</li>
<li> Government Sector Uniforms
</li>
<li> School/College Uniforms
</li>
<li>  
</li>
</ul>
</li>
<li>Shoes
<ul>
<li>  
</li>
<li> Industrial Shoes
</li>
<li> Safety & Security Shoes
</li>
<li> Executive Shoes
</li>
<li>  
</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="uniform_block">
<img src=" http://t0.gstatic.com/images?q=tbn:ANd9GcSH-kRi3rkVciPcH_c6dDJJI6C1ntzwcKl9MoVQIyuKk8F7unpf" />
</div>
<div class="home_footer">
<div class="footer_contents"></div>
</div>
</div>
</body>
kindly help. My requirement is, when i mouse over the "product menu", the drop down menu should be viewed above the image block which is below the menu bar.
Add position:absolute to the css of your ul menu (in your case, the sub1 class), and remove the width:100% so it can inherit the default width of its parent. Absolute positioning will prevent your browser from trying to put your ul element after the previous element on the page.
ul.sub1 {
position:absolute;
}
http://jsfiddle.net/C2YXp/2/
basically i have div with width of 960px and it has navigation on right hand, the navigation works fine, just the last sub navigation shows content extended to 960px, so i was wondering if somehow i can push it to left side, without pushing top navigation with it, i been trying but it dont work. following is the example and css code
navigation, the last black line is the
end of 960px;
screenshot for navigation question two
(question from comment)
css code example
#topNav {
float: right;
position: relative;
}
#topNav li {
position: relative;
float: left;
line-height:1.5em;
padding: 0 .5em;
}
#topNav a span {
clear: both;
}
#topNav ul ul {
display:none;
position: absolute;
top: 20px;
right: 0;
}
#topNav ul ul li {
float:none;
white-space:nowrap;
position: relative;
margin:0;
}
#topNav li.active {
height: 50px;
background-color:#FFF;
border-top:#666 1px solid;
border-right:#666 1px solid;
border-left:#666 1px solid;
border-bottom:#FFF 1px solid;
z-index: 2;
}
#topNav ul ul.active {
display: block;
background-color:#F8F8F8;
border:#666 1px solid;
margin-top: -1px;
margin-right: -1px;
z-index: 1;
}
html 5 code
<nav id="topNav">
<ul>
<li class="active">Home</li>
<li>Everyone</li>
<li>Profile</li>
<li><a href="#" title="Account" >Account</a>
<ul>
<li>Edit Friends</li>
<li>Account Settings</li>
<li>Privacy Settings</li>
<li>Help Center</li>
<li>Logout</li>
</ul>
</li>
<li>Layouts
<ul class="active">
<li>Default Layout</li>
<li>Default Elements</li>
<li>Default Form</li>
<li>Media Detail</li>
</ul>
</li>
</ul>
</nav>
Try adding the following:
#topNav ul ul {
right: 0;
}
Rather than left: 0;. This should make it line up with the right hand side of the top menu item (Layouts in this case), rather than the left hand side.