I'm trying to get the Sidebar Menu looking the same on the correct Live version, but working right so it overlaps the border upon Hover of the items, on the Test version (View Page)
The Sidebar Menu on the Live version looks like this (View Page)
I'm guessing the way to get the Hover feature looking like it's overlapped the border line is to increase the width of the Sidebar area and then manually position the menu? I do have some code below if that would help make sense?
<div id="mod_sidebar">
<?php if ( ! dynamic_sidebar( 'Sidebar' )) : ?>
<ul>
<li id="sidebar-nav" class="widget menu">
<h3><?php _e('Navigation'); ?></h3>
<ul>
<?php wp_nav_menu( array( 'theme_location' => 'sidebar-menu' ) );?>
</ul>
</li>
</ul>
<?php endif; ?>
</div><!--mod_sidebar-->
#mod_sidebar {
float: left;
width: 202px;
/*background-color: #F96;*/
background: url(images/sidebar-bg.jpg);
background-repeat: no-repeat;
}
#mod_sidebar .widget-area {
padding-bottom: 20px;
margin-bottom: 20px;
}
#mod_siebar ul,
#mod_sidebar li {
padding: 0;
margin: 0;
list-style: none;
}
#mod_sidebar .children {
padding-left: 10px;
}
#mod_sidebar .children .children {
padding-left: 10px;
}
The CSS is below
#mod_sidebar,
#mod_sidebar ul {list-style: none; padding: 0; margin: 0;}
#mod_sidebar a {display: block; padding: 10px; width: 210px; font-size: 13px; color: #174267;}
#mod_sidebar li {float: left; width: 190px; background-color: #F4F8Fa; border-top: 1px solid #c3ced5;}
#mod_sidebar li:hover {background: url(images/hover_bg.png);}
#mod_sidebar li ul {position: absolute; width: 210px; left: -999em; background-color: #1662a7;}
#mod_sidebar li:hover ul {left: auto; background: url(images/hover_bg.png);}
Just need a bit of guidance on this if possible! Thanks again!
You can start by looking at line 3904 of this file: http://cdn.snowflakesoftware.com/wp-content/themes/twentyeleven/style.css (The stylesheet belonging to the site that has the layout you seem to be after.
Notice that they are doing a few things here:
1) Using negative margins. So on the menu items hover and active states:
.side-menu a.active, .side-menu a:hover
The elements have a negative right margin of 17px:
margin-right: -17px;
2) The CSS in this sheet is also giving the a.active and a:hover the following background image: http://cdn.snowflakesoftware.com/wp-content/themes/twentyeleven/images/hover_bg.png
Start by looking at these two bits outlined above and see how close it gets you to what you desire.
You could also just copy the CSS and HTML that is being used in production (LIVE site)...
Related
As the first step in making my menu responsive, I want to add a media query in css to change the way the menu displays so that each list item is displayed vertically below the previous item, with it's own submenu items displayed below it before the next list item is displayed. Hope that makes sense. Here are the HTML and CSS that make the menu work in the desktop version of the site:
HTML
<nav>
<img id="logo" src="#logoUrl">
<ul>
<li class="#(CurrentPage.Url == "/" ? "current" : null)">Home</li>
#foreach (var item in menuItems)
{
<li class="#(CurrentPage.Id == item.Id ? "current" : null)">
#item.Name
#if (item.Children.Where("Visible").Any())
{
var subMenuItems = item.Children.Where("Visible");
<ul>
#foreach (var sub in subMenuItems)
{
<li>#sub.Name</li>
}
</ul>
}
</li>
}
</ul>
<br class="clear">
</nav>
(This is on Umbraco, so forgive all the Razor bits)
CSS
#logo {
float: left;
margin-right: 25px;
}
nav {
width: 100%;
height: auto;
background-color: #354a49;
}
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px;
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
nav ul li a {
color: #fefce9;
margin-left: auto;
margin-right: auto;
}
nav ul li a:hover {
font-style: italic;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 99;
width: 200px;
}
nav ul li:hover {
border-bottom: 2px solid #fefce9;
background-color: #a1b0af;
}
nav ul li:hover > ul {
display: block;
margin-top: 2px;
}
nav ul li ul li {
display: block;
float: none;
padding: 20px 3px;
background-color: #a1b0af;
border-bottom: 2px solid #fefce9;
}
nav ul li ul li a {
color: #fefce9;
}
nav li.current {
background-color: #a1b0af;
border-bottom: 2px solid #fefce9;
}
nav li.current > a {
color: #fefce9;
font-style: italic;
}
And here is the CSS I have in my media query at the moment:
#logo {
margin-right: -50px;
}
nav > ul > li {
float: none;
margin: 0px;
}
nav ul ul {
width: 100%;
}
nav li.current {
background-color: inherit;
}
That displays the main menu items one below the other OK, but when I try to change things so that the submenu items appear between the menu items I just end up with the submenu items appearing over the top of the menu items and each other.
EDIT
Here's the rendered HTML as requested:
</nav>
<img id="logo" src="/media/1042/wshalogo.png">
<ul>
<li class="current">Home</li>
<li>
About us
<ul>
<li>Our People</li>
<li>Who we were and are</li>
<li>Our Houses</li>
<li>Annual Reports</li>
</ul>
</li>
<li>
Being a Tenant
<ul>
<li>Asbestos</li>
<li>Being Safe & Secure</li>
</ul>
</li>
<li>
News
<ul>
<li>Community Garden</li>
<li>Football Team</li>
<li>Health Centre</li>
</ul>
</li>
</ul>
<br class="clear">
</nav>
Your second level ul is position: absolute; which means it's taken out of the normal document flow and won't take up space in relation to any other elements. Try changing absolute to relative. That should keep the items correctly positioned in the menu.
nav ul ul {
display: none;
position: absolute; /* <--- Try changing this to relative. */
top: 100%;
left: 0;
z-index: 99;
width: 200px;
}
Also, the fixed height on your top-level li doesn't let the element grow past 50px. Try setting that instead to a min-height:
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px; /* <-- min-height: 50px */
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
That worked in this fiddle but led to awkward jumping when the sub-menu was hovered and then un-hovered.
Also, consider your use-case - if you're doing this to support tablet/mobile devices the :hover state won't work the same way it doesn't when you're using a mouse. Users would have to know to press to the side of the "About Us" link text to see the dropdown, otherwise they'll get taken directly to the "About Us" page without seeing the :hover state. It might be necessary to either show all the items in a tree structure or use JavaScript to add additional functionality for the submenus.
Here's a decent solution to a responsive sub-menu without JavaScript, but it also doesn't use links for top-level menu items that have sub-items.
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
I'm trying to create a menu which will have an image in the middle of it. For example three links to the left & three to the right of the image, each menu item also has to list all child pages.
The parent level menu items have to dynamically update the text based on what has been entered in the CMS but the user doesn't have to be able to reorder or add / remove items from the menu.
What is the best way of going about doing the above? My initial thought was to hard code all the pages & use get_permalink() to get the URLs encase they change but this wouldn't take all the requirements listed above into account.
Here Is Ans that you want. for details follow link
In Below example logo is outside from ul class but then also you can set logo in between li class. so logo in middle of menu.
HTML
<div id="header">
<a class="logo" href="index.html"><img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" /></a>
<ul>
<li>Home</li>
<li>Stats</li>
<li>Schedule</li>
<li>Store</li>
<li>Gallery</li>
<li>Roster</li>
</ul>
</div><!--end header-->
CSS
body {
font-family: Helvetica, Arial, Century;
font-size: 12px;
margin: 0;
background: url('images/bluebg.jpg') repeat-x top center;
}
#header {
background-color: #ffd727;
height: 40px;
position: relative;
margin: 150px auto 0;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: uppercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
}
#header ul li a:hover {
background: rgb(235,200,35);
}
.logo {
position: absolute;
left: 50%;
margin: -48px 0 0 -108px;
}
#media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}
For JS - Refer below This Link
http://codepen.io/wolfcry911/pen/HyLdg
Method 2
you can also do it with left and right different menu..but method 1 is best for wp
http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar
I'm trying to get my theme to add CSS class names to the 'ul' elements in the main-menu in Drupal 7.
HTML mock-up code:
<ul class="topnav">
<li>Home</li>
<li>
Tutorials
<ul class="subnav">
<li>Sub Nav Link</li>
<li>Sub Nav Link</li>
</ul>
</li>
<li>
Resources
<ul class="subnav">
<li>Sub Nav Link</li>
<li>Sub Nav Link</li>
</ul>
</ul>
As you can see, the "first level" ul has a class name of "topnav", the following nested ul has a class name of "subnav". I'm hooking up a jQuery drop down menu and want to apply it without the use of modules. Yes, I've tried the "Menu Attributes" module but that doesn't work here.
I've been searching all day and cannot seem to find a complete solution. I know about superfish / and other themes that come with sf, but I'm wanting my own solution.
Edit:
Ok, I've gotten further. I have a menu with subs on which jquery is initially hiding the subs, however, I can't get jquery to show the subs on a given event: hover over "ul.menu li span"
Here's my CSS:
ul.menu {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.menu li a{
padding: 10px 5px;
color: #000;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.menu li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(../images/bullet.png) no-repeat center top;
}
ul.menu li span{background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.menu li ul {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.menu li ul.menu li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.menu li ul.menu li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.menu li ul.menu li a:hover {
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}
jQuery:
jQuery(function($) {
$('ul.menu li ul').hide();
$("ul.menu li ul").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$("ul.menu li span").hover(function() { //When trigger is clicked...
// alert("No error!");
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.menu li ul").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.menu li ul").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
If i edit this line: $(this).parent().find("ul.menu li ul").slideDown('fast').show(); to this: ("ul.menu li ul").slideDown('fast').show(); It will show ALL the submenus for all parent items - obiviously I only want to show the submenu of the parent menu that I'm hovering over. When I try to add back in $(this).parent()... It won't show any subs at all.
Thank you.
Thank you all for your help. Here's the corrected working code to get the tutorial i mentioned in my original post to work with Drupal 7:
Note: I'm using the main-menu as a block here.
CSS:
ul.menu {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
z-index:999;
}
ul.menu li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.menu li a{
padding: 10px 5px;
color: #000;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.menu li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(images/bullet.png) no-repeat center top;
}
ul.menu li span{background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.menu li ul {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display:none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.menu li ul.menu li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.menu li ul.menu li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.menu li ul.menu li a:hover {
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}
jQuery:
jQuery(function($) {
$("ul.menu li ul").parent().append("<span></span>");
$("ul.menu li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
Partial page.tpl.php:
<?php if ($page['navigation'] || $main_menu): ?>
<div id="navigation"><div class="section clearfix">
<?php print theme('links__system_main_menu', array(
'links' => $main_menu,
'attributes' => array(
'id' => 'main-menu',
'class' => array('links', 'inline', 'clearfix'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
<?php print render($page['navigation']); ?>
</div></div><!-- /.section, /#navigation -->
<?php endif; ?>
This implementation works without having to inject any additional classes into Drupal's menu HTML.
I use the drupal menu block module and want to add to main menu item (first level) a css class for such responsive jQuery Navigation.
http://jasonweaver.name/lab/flexiblenavigation/
<nav>
<ul id="nav" role="navigation">
<li class="top-level item-with-ul">Item #1
<ul class="sub-menu">
<li>Sub 1 Item #1</li>
<li>Sub 1 Item #2</li>
<li>Sub 1 Item #3</li>
<li>Sub 1 Item #4</li>
</ul>
</li>
<li class="top-level item-with-ul">Item #2
<ul class="sub-menu">
<li>Sub 1 Item #1</li>
<li>Sub 1 Item #2</li>
<li>Sub 1 Item #3</li>
</ul>
</li>
<li class="top-level">Item #3
</li>
<li class="top-level item-with-ul">Item #4
<ul class="sub-menu">
<li>Sub 1 Item #1</li>
<li>Sub 1 Item #1</li>
<li>Sub 1 Item #1</li>
</ul>
</li>
<li class="top-level">Item #5
</li>
</ul>
</nav>
I need the css class in the Link and first <li></li> class.
See item-with-ul and link-with-ul
Here you see my started Drupal 7
It is a little unclear what your problem is. It also seems that you are a little uncertain how css targeting works. Blender's original comment above is one way to target (though it needs to be a class not an id for the topnav since your html has it as a class).
ul.topnav > li > ul
This would apply styles to any second level ul just as Blender said. Additionally, since your second level already has a class subnav the same targeting can be achieved by:
.subnav
assuming the class does not show up elsewhere or by
.topnav .subnav
if it is used elsewhere besides in the topnav list.
However, it seems that your question may be how to target a specific subnav in the navigation menu. One way might be:
.topnav > li:hover .subnav
which will only activate the styles on the mouse hover over the particular li that the subnav resides in. If I can assume that your a tags will eventually have real hrefs, then you could also specifically target by those. For example if your Home link is Home then
a[href^=Home.html] + ul
would match the ul that immediately follows that link (which seems to be what you mention in your comment).
For Drupal 7, try placing something like this in your theme's template.php file:
/**
* Implements template_preprocess_menu_tree().
*/
function MY_THEME_preprocess_menu_tree(&$variables) {
// Use the devel module to inspect the theme hook suggestions
// for your menu. For my particular theme and main menu, the
// suggested theme hook is menu_tree__primary
//dpm($variables);
}
/**
* Implements theme_menu_tree__primary().
*/
function MY_THEME_menu_tree__primary($variables) {
return '<ul class="foo bar">' . $variables['tree'] . '</ul>';
}
The caveat to this approach is we're hard coding the class name, so it will not allow any other module to have a say in the class names that appear here. I swear there is a way to hook into the building of the menu at a render array level, where we can easily append/remove classes to the attributes class array, but for the life of me I can't track down that approach right now.
Well, I'm working an an ul - li multilevel menu and have problem.
Firstly, some code (I know it's not perfect but the crappy div is automatically added by Wordpress):
<nav id="page-navigation">
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Pages
<ul class="sub-menu">
<li>One Column</li>
<li>Two Columns</li>
<li>Three Columns</li>
</ul>
</li>
</ul>
</div>
In my stylesheet I'll be pointing only to page-navigation id & sub-menu class so you can totally skip other ids/classes.
The problem is I can't change WIDTH of links in sub-menu. I don't know how. I'm totally lost.
As far as I can see this code overwrites them:
#page-navigation ul li {
float: left;
padding: 0;
font-size: 1.2em;
line-height: 1.2em;
background-repeat: no-repeat;
width: 200px;
height: 65px;
}
#page-navigation ul li a {
display: inline-block;
text-align: center;
padding: 10px 0 0 0;
text-shadow: #222 1px 1px 1px;
width: 200px;
height: 65px;
}
And here's the code for sub-menu items:
.sub-menu {
border-radius: 5px;
border: solid 1px #000;
box-shadow: 0px 0px 25px #000;
background-color: #222;
height: 200px;
width: 500px; /* THIS LINE DOESN'T WORK */
}
.sub-menu li {
width: 500px; /* THIS LINE ALSO DOESN'T WORK ! */
}
.sub-menu li a {
font: 10px Verdana;
tex-shadow: 1px 1px 0px #000;
width: 100px; /* doesn't work :) */
height: 100px; /* doesn't work :) */
}
I know the whole sub-menu is inside of a <li>, but can do nothing with that (default Wordpress behavior).
What now? :(
Thaanks
You need to specify the full path, the higher level items are currently more specific. Try this:
#page-navigation ul li .sub-menu li {
width: 100px;
}
Your .sub-menu width, the first of your "doesn't work" actually does work for me. For the second, you can do two things.
Make it width: 500px !important so it overrides anyway. But I would advise to instead...
Put the ID at the beginning of the selector. .sub-menu li is overridden by any selector with an ID in it. So change it to #page-navigation .sub-menu li.
The selector #page-navigation ul li is more specific than .sub-menu li, so it takes precedence.
You can either work this out by adding an !important annotation to your CSS rules like this:
.sub-menu li {
width: 500px !important;
}
or specify the rule as more specific:
#page-navigation ul.sub-menu li {
width: 500px;
}
For problems like this, please resort to Firebug - you'll have a nice view of what is overwritten by what. This helps a lot :)