Just trying to understand how to get drop down menus to work (the theory behind them).
From what I have seen, it is just playing around with CSS using display: none and block along with the z-index.
Events are attached on mouseover and mouseout to switch the CSS class.
Is that basically it?
There's an alternative where you can make give menu items visibility dependent on the hover style of the parent element, eg.
li ul {display: none;}
li:hover > ul {display: block;}
this means you can make menus simply by using
<ul id="menu">
<li>
some item
<ul><li>sub item</li></ul>
</li>
<li>
some other item
</li>
<ul>
Obviously you'll want to throw in more styling, and classes, etc to prevent it applying to all lists, but that's the general concept behind a css menu.
CSS menus can also take advantage of the :hover property on the anchor tag, which will work in the same fashion as a mouseover/mouseout event.
Edit: I should probably say that the :hover property doesn't always have to be on the anchor tag, but it is the most widely used.
The menu bar is a horzontal <ul> with a <li> for each drop down menu
The drop downs are a vertical <ul>
Special .css stuff required:
For <li> use "list-style: none" to get rid of bullets etc
For <li> use "display: inline;" for horizontal layout instead of default vertical
For <a> inside of <li> for the actual clickable menu items, use "padding: 10px 20px;" (or other dimensions) to make a bigger mouse target area
It might help with getting the overall picture to understand why the onmouse(out|over) events and/or the hover class are only applied to the menu items which have children and not the regular menu items. That's because they, while being visually away from their parent, still remain inside their parent semantically. So when your mouse moves out of the parent menu item into its children, the parent is still considered having the mouse hovered over it.
Related
Is it possible to make a :hover on the :before element so that something shows over it?
Yes it can be done like..
.selector:hover:before {/* css rule goes here */}
It is impossible to add a :hover style (or :active, or :focus) to any elements like :before or :after. They would have to be applied to an actual HTML element, not a pseudo-element.
From your screenshot, it appears you're trying to create a hover menu. Depending on your styles, you may be able to apply the :hover styles to the ul itself. However, you'll only be able to control ul styles with CSS - you cannot control li styles based on the hover state of their parent without JS.
If JS is an option, use it - it should be pretty simple in this case, and would make the code a lot easier. If css-only is a requirement, you might be able to get around this by setting the <ul> to a specific height (large enough to show the hover item but nothing else), and give ul:hover a larger height, or height: auto;, etc.
Its called offcanvas
Refer https://www.w3schools.com/howto/howto_js_off-canvas.asp
AND https://v4-alpha.getbootstrap.com/examples/offcanvas/
Let me know if you require any further help
I'd like to be able to move the Global Navigation Bar above or below the "suite bar" in SP 2013.
Here is an example of what it would look like:
I know I could add a div in the master page, however, I would like to just use CSS. Would I use #DeltaTopNavigation or ms-breadcrumb-top? What CSS properties would I use?
#DeltaTopNavigation
{
// you can move with "margin-top:**px;"
}
I pulled this form --> http://sharepoint.rackspace.com/branding-top-navigation-in-sharepoint-2013
<div class="ms-breadcrumb-top"> - this div is the outer wrapping div that spans the width of the navigation area in the OOTB seattle.master. In a custom branding scenario, you probably will use your own wrapping div instead of this one.
<div class="ms-core-navigation"> - This tag is the wrapping div of the top navigation link area. Not much going on here for styling purposes.
<div class= "ms-core-listMenu-horizontalBox" > - Second wrapping div sets the display of the nav to render inline-block.
<ul class="root ms-core-listMenu-root static"> - top level of the list. The "root" class provides an easy way to identify the root of your navigation and apply any nedessary styles, while the "static" class is applied to any element of the navigation that doesn't dynamically appear (e.g., dropdown navigation). The .ms-core-listMenu-root class sets the margin to zero.
<li class="static"> - an item in the navigation list. Again the "static" tag is applied to the top level navigation items because they are static and don't dynamically appear/disappear based on interaction.
<a class="static menu-item"> - the "menu-item" class denotes that this is one of the actual links in the navigation. Styles that affect the actual link are generally applied at this level of the navigation structure.
<span class="additional-background"> - this span gives you an extra layer to apply additional styling if necessary.
<span class="menu-item-text"> - the span that holds the actual text. Generally, you probably won't need to do much with this, as most styles for the navigation links actually take place on the "menu-item" class applied at the <a> tag level.
I did this to move the designer bar down to give room for the nav
#ms-designer-ribbon{
margin-top:20px;
}
Be sure to un-hide s4-titlerow. If you don't, the nav will disappear when you use the ribbon.
#s4-titlerow {
display: inline!important;
}
Can anybody help me correct this: http://jsfiddle.net/ShgRr/ so that the div displays it's content consistently with the ol?
The main problem is that the right-positioned span is breaking outside the div.
I did consider making the div a li item but that would obviously be un-semantic.
Something else I was wondering - is it correct to use negative margin on an anchor so it covers the li bullet and makes the whole link clickable?
Thanks
Why use a <div>? Your CSS will work just fine if you move the contents into a new <li> with that class name: http://jsfiddle.net/ShgRr/2/
I'd argue that making the <div> an <li> is perfectly fine. <table> elements contain both table headers and table rows without problems.
"is it correct to use negative margin on an anchor so it covers the li bullet and makes the whole link clickable?"
it is more correct to remove the bullet entirely if you don't want it there.
if you do want ti these - I don't tend to make bullets themselves clickable - they're a very small target compared to whatever they're bulleting. Easier to click the text than the bullet
your can add this class in your CSS, html part
div a span > i
{
margin: 0 8px;
}
My dropdown menu is now working with my css triangles (yesterdays problem), but now i would like a 2-3 px gap to the dropdown, but the moment i add that, i have the problem, that when you slide the mouse from the main nav point to the drop down, the drop down disapears (obviously as the mouse is no longer over the li link.)
So anyone got any good ideas, how i can have a gap, without the drop down dissapearing ?
http://keith464.fahrradhamburg.de/Lager/Metall-Behaelter/Stahlblech-Behaelter/Stapelbehaelter-aus-Stahlblech.html
You can use another container to hold your dropdown, witch will have transparent background and will be larger than your menu by 3px at the top, so you'll actually display that container too at your mouse hover, and nothing will disappear
LE: or you can show your dropdown by using javascrip and set a timeout to it, so it won't disappear that fast if your mouse is not over any <li>
A simple fix is to add this to your ul ul (drop down menu):
margin-top:-3px !important
The important tag ensures this margin takes precedence over any existing styles.
I was using jQuery plugins to create a rounded corner for my <li>, but it was not working on a lot of browsers and didn't support mouse over.
I am wondering what is the best way to use two images (left corner and right corner) as the left and right side with using <li>.
The construct that I have seen used most for that is a span inside a link.
so something like:
<li><a><span>Your text here</span></a></li>
you can then target the span and the link using the hover state of the link:
a:hover{some rules here}
a:hover span{some more rules here}
that keeps it kinda semantic, and doesn't add to much junk to the page.
You could put Divs inside your li's like so:
<li>
<div class="lefcorner"></div>
<div class='liContent'>Foo</div>
<div class='rightcorner'></div>
</li>
That way you will both keep your semantics and will also have the cross-browser support of styling DIVs.