I'm working on a navigation like the image below.
The whole nav is the width of the browser window, but the items are centered to the design.
I haven't worked with any code in quite some time now, and am having difficulty getting this together. Should I use a body image to repeat horizontally and then position my list where it needs to be? Or Should I use a div to span the whole width of the browser window and position the list elements where they need to be?
Thanks
I'd go with using a container with a simple background colour and positioning the menu inside of that.
I'll whip up a quick example for you.
UPDATE
Here's a quick example I've just put together: http://jsfiddle.net/aQTRF/
Alternatively, if you require the black menubar to extend past the container of the navigation, it may be easier to add the bar as part of a repeating body background (as you've stated) and then position your nav over the top. This would also allow you to have a slightly different shade of menubar within the main content area compared to outside of it.
I would advise using HTML and CSS over images where possible. It will make the page faster to load.
How about something nice and simple like this?
Use an unordered list
<ul id="nav">
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
Add your styles to #nav for the background
Related
I have a problem adding a dropdown to a Twitter Bootstrap framework. After I have added the dropdown it expands height of the whole topbar and this is what I'm trying to fix.
Page URL is http://locabikes.de/
If you hover the mouse on the "DE" symbol in the upper right corner, the dropdown will show up but the topbar will also change it's vertiacal size covering the navigation bar.
Is there some way to only show other languages to choose without changing the size of a topbar?
This is the code I'm talking about:
<div class="col-sm-12 col-sm-no-pd">
<ul id="lng">
<li>
<span>DE</span>
<ul>
<li>EN</li>
<li>PL</li>
</ul>
</li>
</ul>
<div id="topSocial">
</div>
This is how I want it to look like after hoovering on the current language hyperlink.
Since you are using bootstrap I should suggest changing the markup of ul#lng to the markup given by bootstrap documentation for dropdowns.
http://getbootstrap.com/components/#dropdowns
Dropdown by default works on click but with the following tweak it will also work on hover:
http://www.joostrap.com/support/tutorials-videos/202-how-to-enable-hover-for-nav-dropdowns
Hope this helps you :)
Turned out I only needed to remove
overflow: hidden property from the parent #topbar div and it started working.
I have two spry menus on one page. One is main site and one is that individual page's menu that shows and hides div accordingly.
The "artistMenu" div doesn't work and it doesn't even have the hover effects, although it's set up exactly like the site menu apart from the different UL id's
<div id="artistMenu">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li>Social</li>
<li>Music</li>
</ul>
<!--Artist menu end--></div>
CSS:
#artistMenu{
background-color: #000;
}
The main site menu is set up virtually the same way except it's in the header div with logo and has no background.
If I comment out the <div id="artistMenu"> the link's work however, I lose my background color and the contents below the menu, for whatever reason because un-styled as the pop out of the <div id="gridContainer"> and and spread the width of the page.
I've worked on this for 5 days off and on and can't figure it out nor find info online.
I have a UL that is centered properly in wide and narrow widths but breaks in the mid range. When it is wide everything fits nice, when the browser is narrow everything stacks nice, but when using a mid width, say 800px wide, the menu wraps to the next line, which works for now, but I would like to see if it was possible to center the second row of links. Here is a screenshot of how it looks on top (red circle), and what I want it to do on the bottom (green circle).
If you look at another thread, you will see kind of how my menu works right now in his example link. If you shrink the browser on his example you will notice the menu wraps and the second row is left aligned.
I would like to have the second row centered under the first row like in the picture above. Is this possible?
Here is the HTML:
<div id="navContainer"
<ul>
<li class="menu_home">Home</li>
<li class="menu_gallery squished">Gallery of Properties</li>
<li class="menu_service">Service Options</li>
<li class="menu_contact">Contact Us</li>
<li class="menu_test">Testing HotSpots</li>
</ul>
</div>
I don't think the CSS is needed since it isn't working like I want it to anyway (and it is spread out through about 38 different CSS files, everything is floating left, but I can add the css here if you think it might help, but I am willing to scrap everything anyway...)
Add
text-align:center;
to .nav ul in your Tinkerbin example.
or:
#navContainer ul {
text-align:center;
}
to your own css
This is what I am trying to describe as my problem, you can see the white content box just kind of stops:
Link to image as I cant put images on here yet:
http://imageshack.us/photo/my-images/534/43094999.png/
The image loaded for that background apparently isn't long enough, and I am not sure how to repeat it down so it all flows.
Here is a peak at my css if that helps in solving the problem:
http://pastebin.com/RwcAPjS5
You need to clear floats after the list of boxes. You could do this with an extra element, or by adding the clear CSS property to the next sibling element (note that this stops some margins working).
.clearfix {
clear:both
}
Then in your HTML (the ul is just a guess as I haven't seen your HTML):
<ul class="float-boxes">
<li>...</li>
</ul>
<div class="clearfix"></div>
There's a good article on floats here, which touches on why this happens.
I've got a css-based horizontal drop down menu that works perfectly well, but I'm having trouble adding an effect that adds a top border on the item that represents the page the user is currently on. Here's the HTML code for the dropdown:
<ul id="browse">
<li>
Comedy
<ul>
<li>Caddyshack</li>
<li>Back to School</li>
<ul>
</li>
<li>
80s
<ul>
<li>Die Hard</li>
<li>Overboard</li>
<ul>
</li>
</ul>
Here's what I want:
Hovering over an item changes its background color, as well as the background of the dropdown (the nested ul element)
On the active page for an item, that item should have a 2 pixel tall colored border at the top.
Just to be clear, the dropdown already works fine, and I can already identify the "active" menu item. I just can't seem to figure out how to combine changing the background color on hover and adding a border-top on the active menu item without messing up the style of the menu somehow (either leaving a 2px tall blank space on hover, or having the hover background property override the border-top property on the active item)
I should also add, CSS-only solutions please.
Any help here would be much appreciated.
For the background color, it's fairly simple, just use code similar to this:
#browse a:hover {
background-color: fuchsia; /*Whatever your background color is*/
}
As for the border effect, that's a little harder to do semantically, but I feel that this article on CSS specificity would do the trick. Basically, it involves adding an id to your body, and then referencing that id in the CSS so that only the specific pages will be affected.
EDIT: If you're having issues with your top border affecting layout (I don't know what orientation the navigation has), try reducing the margin or padding you have on each item by the size of your border (2px, in this case) to maintain overall box height. If you don't have any margins/paddings, try negative margins.