I am having trouble with my drop down menus. I would like to have multiple columns under one drop down.
http://jsfiddle.net/Ru3Zv/ here is what I am working with.
#navigation-primary > ul > li > h2, #navigation-primary > ul > li > a {
/* font-size of the first level */
font-size: 1em;
line-height: 40px;
}
#navigation-primary > ul > li > h2 > a, #navigation-primary > ul > li > a {
/* links of the first level */
/* text-transform: uppercase; */
color:white;
font-weight: bold;
text-decoration:none;
/* background: #156aa3; */
background: #1f1f1f;
}
#navigation-primary > ul > li > a.active, #navigation-primary > ul > li > h2 > a.active {
/* active state of the first level */
background:#1f1f1f;
color:#fff;
}
#navigation-primary > ul > li > a:hover, #navigation-primary > ul > li > h2 > a:hover, #navigation-primary > ul > li:hover > a, #navigation-primary > ul > li:hover > h2 > a {
/* hover state of the first level */
background:#1f1f1f;
color:#fff;
}
#navigation-primary .mega a {
/* links color inside panel */
color:white;
}
#navigation-primary .mega a:hover {
/* :hover on links inside panel */
color:white;
/* text-decoration:underline; */
font-size:1.10em
}
#navigation-primary .mega ul.megamenu-2 a {
/* color:#4c4b4b;*/
/* This is the color of the submenu items */
color:#ffffff;
}
#navigation-primary h3, #navigation-primary li.menu-section-title > a {
/* primary links subsection titles */
font-size:1.0em;
/* text-transform:uppercase; */
font-weight: bold;
text-decoration:none
}
#navigation-primary li.menu-leaf-list {
/* child links inside the panel */
/* border-bottom: 1px dashed #e2e2e2;*/
}
.mega {
/* border-top: 10px solid #1f1f1f; */
border-bottom: 4px solid #1f1f1f;
border-left:1px solid #1f1f1f;
/* border-right:1px solid #ccc; */
background:#1f1f1f;
white-space:nowrap !important;
width:auto !important;
}
Under the Services menu I would like to have one column with Managed Services then the underlined links below that then in a second column have Consulting Services with the rest of the underlined links below that. This is similar to http://www.workday.com/.
What would I have to change to get this?
Try this module. It might help.
https://drupal.org/project/megamenu
example:
http://www.aaml.org/
For the multiple columns under one drop down use "tb mega menu". Only for drupal 7.
https://drupal.org/project/tb_megamenu
Related
I have a really small problem I want to fix, but I don't know how. So I have a menu in which I added an icon with the "Elegant Icons" font. I want it to show only on elements li which have childen lis, but it appears on first children on first li element. Here is what I mean Link.
Here is my CSS:
.menu-new li:first-child{
border-left:1px solid black;
}
.menu-new li > a:after{
content: "\37";
font-family: "ElegantIcons";
}
.menu-new li > a:only-child:after{
content:"";
}
Add > to denote immediate child of .menu-new
.menu-new > li:first-child{
border-left:1px solid black;
}
.menu-new > li > a:after{
content: "\37";
font-family: "ElegantIcons";
}
.menu-new > li > a:only-child:after{
content:"";
}
I think Matthew James Taylor is a hero for this beautiful bit of code:
http://matthewjamestaylor.com/blog/centered-dropdown-menus
However, no matter how I chop away at it – and I have, FOR YEARS – I can not make the menu work with curved corners.
So I am posting this here, because I don't see a solution on SO, and I think the community could prosper from this.
Details:
When hovered, the left-most and right-most menu items both revert to squared corners. I have tried adding a css class to correct this, but they still revert to squares when the user scrolls into the sub-menu area.
Here is my menu, in situ: http://hrmpowerwash.pro
Here is my css:
/* horizontal navigation bar */
/* Main menu settings */
#centeredmenu {
position:relative;
clear:both;
float:left;
z-index:1000; /* This makes the dropdown menus appear above the page content below — superceded only by alerts (z=99999) */
margin:1em 0 0 0;
padding:0;
width:100%;
font-size:90%; /* Menu text size */
text-transform:uppercase;
}
/* Top menu items */
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:.6em .5em .4em;
font-size:1em;
line-height:1em;
text-decoration:none;
color:#FFF;
font-weight:bold;
}
/* These three classes add the white border to the top menu items. */
.leftmost {
border:#FFF 2px solid;
border-radius: 8px 0 0 8px;
background:#e68f1a;
}
.middle {
border:#FFF solid;
border-width:2px 2px 2px 0;
background:#e68f1a;
}
.rightmost {
border:#FFF solid;
border-width:2px 2px 2px 0;
border-radius:0 8px 8px 0;
background:#e68f1a;
}
#centeredmenu ul li.active a {
color:#fff;
background:#000;
}
#centeredmenu ul li a:hover { /* This is to change if we want a brand colour for menu hover instead of blue */
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}
/* Submenu items */
#centeredmenu ul ul {
display:none; /* Sub menus are hidden by default */
position:absolute;
top:2em;
left:0;
float:left;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:.8em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#eee;
color:#444;
line-height:1.4em; /* overwrite line-height value from top menu */
border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
float:left;
width:100%;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#36f; /* Sub menu items background colour */
color:#fff;
float:left;
}
/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
#centeredmenu ul ul.last li {
float:right;
position:relative;
right:.8em;
}
/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}
As you can, see I have rounded the left- and right-most options of the main menu (by applying a class to the first and last #div ul li) but they disappear upon hovering.
In another version, I have added the following code to fix the hover of the top menu items, but it still reverts to square corners when the user descends into the sub-menu items:
/* These classes add rounded corners to the menu headers when they are hovered over */
.rightmost > a:hover {
border-radius:0 8px 8px 0;
}
.leftmost > a:hover {
border-radius:8px 0 0 8px;
}
Please advise, if this is even possible; and how it may be achieved. What am I overlooking?
Thanking all of you in advance.
You were very close, you just needed these 2 additional calls on your CSS:
.rightmost > a:hover, .rightmost:hover > a {
border-radius:0 8px 8px 0;
}
.leftmost > a:hover, .leftmost:hover > a {
border-radius:8px 0 0 8px;
}
Notice the .rightmost:hover > a and the .leftmost:hover > a that were added.
This now will keep the a rounded, even when the dropdown is hovered.
I also suggest adding -webkit-border-radius CSS to each for more browser compatibility.
I am trying to prevent the hover and focus effect only on first row, but when I am applying "first-child" pseudo code it applies to all the rows.. Here's the code:
/* CSS */
ul {list-style-type: none;}
ul > li > a {
background: transparent;
font: normal 12px Arial, sans-serif;
color: #007DBD;
margin: 0;
border-radius: 0;
padding: 7px 10px;
width:200px;
}
ul > li > a:first-child {
color:#333;
background: none;
}
ul > li > a:hover, ul > li > a:focus {
color: #009BE1;
background: #F3F3F3;
text-decoration: none;
}
/* HTML */
<ul>
<li>sample#test.com</li>
<li>Edit Profile</li>
<li>Logout</li>
</ul>
I don't want any hover effect for first <li><a> item.
Here's the js-fiddler:
http://jsfiddle.net/123qyrtc/
Please let me know if there is any CSS solution...
ul > li:first-child > a:hover, ul > li:first-child > a:focus {
color:#333;
background: none;
text-decoration:underline
}
To clarify, you don't want the first part (sample#test.com) to have a hover effect, correct? You need to target the first li then, like so:
ul > li:first-child > a:hover {
color:#333;
background: none;
}
Use the :not() pseudo to exclude what you don't want:
Updated JsFiddle
ul > li:not(:first-child) > a:hover, ul > li > a:focus {
color: #009BE1;
background: #F3F3F3;
text-decoration: none;
}
Just remember that the :first-child in this case is the <li>, not the a. The a is always first.
So when I select the menu item from my drop down list, it disappears when it loads the link. I have verified that the menu items are set to display on all pages. Is this a css setting ?
Thanks
CODE: added per request
/*
# ------------------------------------------------------------------------
# Templates for Joomla 2.5 / Joomla 3.x
# ------------------------------------------------------------------------
# Copyright (C) 2011-2013 Jtemplate.ru. All Rights Reserved.
# #license - PHP files are GNU/GPL V2.
# Author: Makeev Vladimir
# Websites: http://www.jtemplate.ru/en
# --------- http://code.google.com/p/jtemplate/
# ------------------------------------------------------------------------
*/
/* all menu links */
#nav a, #subMenusContainer a{
text-decoration:none;
display:block;
padding:10px 20px;
background-color:#fff ;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
margin:0;
float:left;
}
/* Just sub menu links */
#subMenusContainer a, #nav li li a{
text-align:left;
}
/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#3366FF ;
color:#FFF;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
background-color:#3366FF ;
color:#FFF;
}
/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{
background: url(../images/arrow_right.gif) right center no-repeat;
}
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{
background: url(../images/arrow_right_over.gif) right center no-repeat;
}
/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{
background: url(../images/arrow_down.gif) right center no-repeat;
}
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{
background: url(../images/arrow_down_over.gif) right center no-repeat;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -2px;
}
/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:#fff;
border:1px solid #3366FF;
left:0;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
#nav li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
}
/* main menu ul or ol elment */
#nav{
display:block;
list-style:none;
margin:0 0 0 0;
z-index:5;
/* top:15px;*/
/* left:50%;*/
text-align: left;
display:block;
}
#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{ float:none; }
#nav li li a{ /* Just submenu links*/
position:relative;
float:none;
}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}
/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
#nav li:hover ul{ margin-left: 0; }
#nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul { margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }
Thanks, updated comments
It can be here:
/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#3366FF ;
color:#FFF; /* Try #AAF here */
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
background-color:#3366FF ;
color:#FFF; /* Try #AAF here */
}
This CSS makes the color of the text white. THe background here is in not white but after in the CSS you have background:#fff; applied to #nav ul.
If this doesn't work you need to post your html, make a fiddle or post a live link.
I'm not sure if I formulated the question correctly, but let me try to explain what I want to achieve.
I'm trying to style navigation menu of a WordPress-based site.
I want the submenu links to be evenly arranged along the entire width of the website's <body> tag (960px wide). If the links of a particular submenu do not fit in one row, I want them to wrap around and arrange themselves in neat columns.
Finally, I want the submenu, when it drops down on hover, to push the rest of the website's content down.
Problem: the submenu unordered list affects the position of the links in the parent unordered list, moving the links around. Somehow, the only thing I could do to keep the parent menu links in place was to pull the submenus out of the way by applying margin-right:-965px;
Question: How should I modify my CSS to position both submenus all the way to the left, level with the edge of the main container?
(If necessary, I can assign custom classes to each submenu separately, for example: .submenu-about and .submenu-investors.)
Thank you in advance for your help!
Here's the complete CSS for the navigation menu:
.main-navigation ul {
list-style-type:none;
margin-top:45px;
}
.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}
.main-navigation ul li {
float:left;
}
.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}
.main-navigation ul ul {
background:#efefef;
display:none;
}
.main-navigation li {
font-size: 13px;
}
.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}
.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}
.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}
This Should do it
Add this to your css
.main-navigation ul li .sub-menu {position:absolute; left:0px;}
Found my own answer.
Remove the background from ul li:hover ul.
Set position:relative and the gray background for the ul li:hover >ul li.
Set individually the negative left margins for each submenu li item, to pull them left separately by different number of pixels.