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;
}
Related
If I have a navigation menu using css image sprite, is it possible to change the z-index when the link is clicked on/selected?
You can't really use CSS to change on click (unless you use :active, but that only lasts for a moment, while clicking). Use JavaScript instead.
Let's say your CSS looks like this:
#change_me {
z-index: 1;
}
Then you can have HTML with some inline JavaScript:
<div id="change_me">My z-index will change</div>
<div onclick="document.getElementById('change_me').style.zIndex='2'">
Click Me!
</div>
Clicking the second div will change the z-index of the first (i.e. #change_me).
It doesn't matter what the elements are (they can be div's, span's, p's, etc.)
I have a bunch of tabular/key-value data, of which I always show one item and the rest when the user clicks on the first, like this jsFiddle:
<div data-role="collapsible">
<h3><div class="ui-grid-a">
<div class="ui-block-a">Customer:</div>
<div class="ui-block-b">Mario's Plumbing</div></div></h3>
<ul data-role="listview">
<li><div class="ui-grid-a">
<div class="ui-block-a">Phone:</div>
<div class="ui-block-b">1-800-MUS-ROOM</div></div></li>
...
</ul>
</div>
However, when jQuery Mobile adds an icon to the header item ("Customer: Mario's Plumbing"), the value field, i.e. "Mario's Plumbing", doesn't align with the value fields in the <ul> list, i.e. "1-800-MUS-ROOM".
I think jQuery puts the icon side-by-side with the "Customer: Mario's Plumbing" box---this is compatible with what I see: the misalignment looks roughly like 100% of a button width for the key field and 50% of a button for the value field, which I would expect given my use of a ui-grid-a (which does a 50/50 split). I would want the icon to be part of the left 50%, i.e. inside rather than beside that box. Can I do that? How? It might be easy CSS and me being a CSS retard :)
It looks like the jQuery mobile element styles are not playing nicely together, in this case the collapsible block and the grid layout styles.
The collapsible block adds the icon and the style which pads the header.
.ui-btn-inner {
padding:.6em 20px;
}
The additional rule, pads the left even more (to move the text away from the icon)
.ui-collapsible-heading .ui-btn-inner, .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner {
padding-left: 40px;
}
but this pushes all the header text left by 40px.
The only way I could find to correct the mismatch is to add an additional rule to move the second block to the left. By adding the following rule, the text lines up again.
.ui-collapsible-heading .ui-btn-inner .ui-grid-a .ui-block-b {
margin-left:-10px;
}
It seems to work fine at different page zoom levels in my local Chrome browser testing but I have not tested on a mobile device.
Edit: Also, there is a typo in the example and the fiddle, you have un-block-b and not ui-block-b for Mario's Plumbing.
So I'm developing a mobile micro site and that said, I want the links on the page, to behave
like ios links/tabs do, that when you click on them, the whole width of the button is active and changes color to display a click/finger over state etc..plus the WHOLE width of that div behaves like a button so that either on a small phone or a tablet, as long as I don't specify a width, that its active state goes from left to right ALL THE WAY as a "block"
To that effect for example, if I have a regular text link. like this:
<div class="mainBtns">Portfolio</div>
id give it this CSS so that on mouseover/click with finget etc, that it behaves like an ios button/tab.
CSS:
.mainBtns a{
display:block;
}
.mainBtns a:hover{
background-color:#d8d3cb;
}
Now that said. This is the problem im trying to solve.
I have a parent Div called thumbItemW (the content wrapper);
and two child items called galThumb and galThumbtxt
The content block looks like this:
<div class="thumbItemW ">
<div class="galThumb">
<a href="gallery-highrise.php" alt=""><img src="images/thumbs/highrise.jpeg" alt="High rise Gallery" />
</a>
</div> **//this is the gallery thumb floated left**
<div class="galThumbTxt">
HIGH RISE CONTEMPORARY
</div>**//this is the gallery thumb text floated right**
<div class="clearEm"> </div>//clear the float
</div> <!-- thumbItemW ender -->
What I want to do is that, when the user finger clicks the parent div, that the background color changes like in the example above with "mainBtns / mainBtns a:hover"
Problem is that, unlike the first example with mainBtns, since this one has child items, if I do something like:
pseudo CSS:
.thumbItemW a:hover{
display:block;
}
or something like this, this doesn't work the way id want it, since the elements are floats inside this parent div.
What I'm wanting to do is make the parent div .thumbItemW be like a display block so that when the user clicks, that they can click ANYwhere along that divs width and still activate the button as oppose to clicking RIGHT ontop of the button or text.
Can this be achieved the way I have it? Can this be achieved with CSS alone WITHOUT javascript/jquery?
Hope it's not too confusing.
why wouldn't you just specify width and height on the a element?
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.
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.