I have a horizontal navigation, and I want the last two item to be pushed to the right side of the container.
With only one item, I could simply float the last item of the navigation. But I want to apply this to two elements - and I have the constraint that their order has to be the same in HTML and for the viewer.
I tried the following, but this broke my javascript code which relies on
$('... a').parent().next().doSomething(...)
The code
<ul class="main main-nav">
<li class="first">Projekte</li>
<li>Aktuell</li>
<div class="push-right">
<li>Über uns</li>
<li>Kurse</li>
</div>
</ul>
Is there some obvious solution I don't see?
Any other shortcut?
You shouldn't place a div inside of a ul:
<ul class="main main-nav">
<li class="first">Projekte</li>
<li>Aktuell</li>
<li class="push-right">Über uns</li>
<li class="push-right">Kurse</li>
<!-- Or Flip them to maintain order -->
<li class="push-right">Kurse</li>
<li class="push-right">Über uns</li>
</ul>
CSS:
.push-right{
float:right;
}
Related
i am using below code
<div>
<div id="aboxound" >
<ul>
<li class="aHeader" >
<ul>
<li class="Name">Names</li>
<li class="Name">values</li>
</ul>
</li>
<li style="height:500px; overflow-y:scroll;">
<c:forEach items="${dataModel.List}" var="entry">
<li class="aUser" >
<ul>
<li class="userName"><c:out value="${entry.key}" /></li>
<li class="userName"><c:out value="${entry.value}" /></li>
</ul>
</li>
</c:forEach>
</li>
</ul>
</div>
</div>
Here i want to apply scroll to second list, by keeping first list as fixed header. My above code is not working.it add empty scroll first and then list item without scroll. What i am doing wrong
If you write overflow:scroll even the not content not heavy it shows scroll, use overflow:auto in your code inplace overflow-y:scroll.
I made a menu , I have worked with chrome but now when I try with firefox I get spacing between items
In chrome
In Firefox
Here's The CSS
http://jsfiddle.net/Mazala/mpc1o2gf/
HTML :
<nav>
<ul class="menu">
<li id="accueil">Accueil</li>
<li id="bureau">Bureau</li>
<li id="actualites">Actualités</li>
<li id="partenaires">Partenaires</li>
<li id="contact">Contact</li>
<li id="liens">Liens utiles</li>
<li id="Liens">lien+subtitles
<ul class="sousmenu">
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
</ul>
</li>
</ul>
</nav>
CSS in the link .
Thanks for help.
Using inline block will make any text/spaces between your elements treated as text, and style them accordingly. One quick fix (if pure images) was to set the font-size to 0 (that wouldn't work for you since you have actual text in there).
The easiest solution, if you don't care about having the perfect looking code and just getting it to work, is to remove all extra spaces in your code. Which I did to your code, and it works:
<ul class="menu">
<li id="accueil">Accueil</li><li id="bureau">Bureau</li><li id="actualites">Actualités</li><li id="partenaires">Partenaires</li><li id="contact">Contact</li><li id="liens">Liens utiles</li><li id="Liens">lien+subtitles<ul class="sousmenu"><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li></ul></li>
</ul>
https://jsfiddle.net/mpc1o2gf/1/
That's a common issue with inline-block elements. By default, there some some spacing surrounding those elements. It's somewhat counter-intuitive but default behavior.
There are a few fixes to this. My preferred is to float the li elements. There are some caveats. Read this for a full understanding.
I am trying to affix an image to the bottom of a nav list and have it stay there when the page scrolls.
This is what I am wanting:
This is what I am getting when the affix kicks in:
I need it to stay just like picture one. I have tried googling the problem and searching stack overflow with no results.
Here is the code:
<!--SIDEBAR NAVIGATION -->
<ul class="nav nav-list well hidden-phone hidden-tablet" data-spy="affix" data-offset-top="850">
<li class="nav-header">The Green Panda</li>
<li class="divider"></li>
<li>What We Do</li>
<li class="divider"></li>
<li>Our Solutions</li>
<li class="divider"></li>
<li>More Than Web Design</li>
<li class="divider"></li>
<li>Contacting Us</li>
</ul>
<img src="img/woody-effect.png" class="img-bottom nav-list" data-spy="affix" data-offset-top="850">
EDIT:
The selector was incorrect.
If the height of your menu is static, you can add a class to that image when it switches over to the fixed styling and apply this css:
top: 310px;
That will position it at the bottom of your menu.
I would set up a class underneath .affix and have it applied to your image (add the id panda_logo)
#panda_logo.affix {
top: 310px
}
I am using the Zurb Foundation 4 framework for my site. I want to have a navbar that is positioned beneath a header that sticks to the top of the page when you scroll past. This works fine, except that the page content jumps up ~45 pixels when the Top Bar sticks to the top of the page. The effect can be seen on this page, though this is a different navigation element: http://foundation.zurb.com/docs/components/magellan.html
Is there some way to fix this, or do I have to change my site design to accomodate this bug?
The documentation is here: http://foundation.zurb.com/docs/components/top-bar.html
<div class="contain-to-grid sticky">
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Top Bar</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Item 1
<ul class="dropdown">
<li><label>Level One</label></li>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li class="divider"></li>
<li>Sub-item 3</li>
<li class="has-dropdown">Sub-item 4
<ul class="dropdown">
<li><label>Level Two</label></li>
<li class="has-dropdown">Sub-item 1
<ul class="dropdown">
<li><label>Level Three</label></li>
<li class="has-dropdown">Sub-item 1
<ul class="dropdown">
<li><label>Level Four</label></li>
<li>Sub-item 1</li>
</ul>
</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
<li class="divider"></li>
<li>Sub-item 4</li>
</ul>
</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
<li>Sub-item 4
</ul>
</li>
<li>Sub-item 5</li>
</ul>
</li>
<li class="divider"></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li>Item 2</li>
</ul>
</section>
</nav>
This appears to be a hard-coded "feature" in Foundation 4's Javascript. Instead of merely preventing the default behavior of the link, it automatically forces the link to redirect to #, which causes the browser to jump to the top of the page. This appears to be intentional (more on that in a second).
The only alternative for now is to just not use the Top Bar component and create your own navigation using other, more reliable Foundation components. For instance, you can build your own navigation easily enough using both the .sticky class and simply defining a fresh <nav> element with all necessary <ul> menu items within.
The Top Bar has a very specific use by design... clicking "Menu" will use Javascript to reveal the navigation as a single column of options under the Top Bar. To ensure that mobile users can scroll a big set of options, this jumps the window to the top of the page and removes the fixed behavior until you close the menu. This works well enough when your Top Bar starts at the top of the page, but has serious implications when it doesn't (for instance, scrolling to the top of the page might move the menu out of view).
Now, this is purely opinion... but I'm really not a fan of Foundation's Top Bar implementation. Usability tests have shown that putting your mobile menus in the footer and linking to them with an anchor are more efficacious and user-friendly. You can use .hide-for-small to hide your desktop menu items and .show-for-small to reveal your own custom, anchored "Menu" link... that menu link would anchor to a mobile-specific menu in your footer (which again, you would reveal with .show-for-small).
Long story short: Top Bar is sloppy from a usability standpoint and broken (by design) for your use-case. I'd recommend building your own sticky menu :-)
This issue was fixed: https://github.com/zurb/foundation/issues/1993
Answer:
If you don't want it to jump to the top specify in data-options:
<nav class="top-bar" data-options="scrolltop: false">
or on initialization:
$(document).foundation('topbar', {scrolltop: false});
Remove the "sticky" class if you don't need it. Worked for me.
On this page: https://github.com/jordanmerrick/foundation/commit/47391710c7b6d30ad54e50f3b2526cb8f6184be1
I found the code in foundation.topbar.js that adds padding to the body tag depending on whether top-bar is sticky or not:
if ($('.sticky').length > 0) {
var distance = $('.sticky').length ? $('.sticky').offset().top: 0,
$window = $(window);
var offst = $('nav.top-bar').outerHeight()+20;
(".sticky").after("<div class='top-bar-sticky-padding'></div>");
$window.scroll(function() {
if ( $window.scrollTop() >= ( distance ) ) {
$(".sticky").addClass("fixed");
- $('body').css('padding-top',offst);
}
else if ( $window.scrollTop() < distance ) {
$(".sticky").removeClass("fixed");
- $('body').css('padding-top','0');
}
});
}
I'm not a javascript wizard - but it seems as if instead of setting offst to the height of the .top-bar, you set it to the value of .top-bar-sticky-padding directly, you can control the offset with a media query instead of forcing an offset the size of the top-bar.
Am I wrong? I'm nervous about "hacking core" but this seems to have solved the problem for me.
the page in question is http://www.streetstyles4all.co.uk/test4.html (general menu drop down problem)
Hi
I have decided to update my menu to use icons. I had a drop down menu working with no java script etc just css and html, and I tried to put icons beside each link in the drop down, but before I could go any further I could not get passed this problem, and get rid of the hover image that is used for the main navigation. The image appears next to every menu
I can't get passed this. Can anyone please advise.
My menu code is:
<ul id="menu">
<li id="home">Home</li>
<li id="general">General
<div class="dropdown_4columns">
<div class="col_1">
<h3>Street Styles 4 All</h3>
<ul id="submenu">
<li id="ss4aaboutus">About Us</li>
<li id="ss4aagency">Agency</li>
</ul>
</div>
<div class="col_1">
<h3>Events</h3>
<ul>
<li>What's on next</li>
<li>Competitions</li>
<li>End of Year Show</li>
<li>Summer School</li>
<li>Master Classes</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
</div>
</li>
<li id="nearestclass">Nearest Class</li>
<li id="tutorials">Tutorials</li>
<li id="shop">Shop</li>
<li id="hireus">Hire Us</li>
<li id="contact">Contact</li>
the page in question is http://www.streetstyles4all.co.uk/test4.html
I think the hover state and the height for #general is getting applied to the LI elements that are inside the #general LI element. You may need to define a class for the inner LI elements and set the background as none and mark it !important.
Try using the css z-index property for your images. As easy as z-index: 3;
Or try resizing the images also with css.