I'm using ZURB foundation and I am wondering if an easier way exists of aligning menu items on small devices.
Currently my HTML looks like this:
<ul class="vertical menu align-right">
<li><a title="My God, It's Full of Stars">Link 1</a></li>
<li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
<li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>
As you can see, on all devices my menu aligns 'right' but on smaller devices I'd like to center those items, I know that ZURB 6 has many classes and data methods of getting things to work differently depending on the viewpoint size.
I've tried using both:
<ul class="vertical menu align-right" data-responsive-menu="small-align-center">
<ul class="vertical menu align-right small-align-center">
Which both do not work! sadly.
I suppose I could use:
/* Small only */
#media screen and (max-width: 39.9375em) {
.menu.align-right {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.menu.align-right.vertical li {
text-align: center;
}
}
I would prefer to keep the CSS as minimal as possible and wondering if a method exists without adding to the CSS. As great as the documentation is on the ZURB 6 site, not all is listed.
The Question(s):
Is there a method of aligning menu items using CLASS or DATA on small, media and large devices?
The only way to accomplish this without rules for breakpoints is to forego the flex rules and use simpler text-alignment rules, which allow for some breakpoint-based name components:
<ul class="vertical menu small-12 text-center medium-text-right">
<li><a title="My God, It's Full of Stars">Link 1</a></li>
<li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
<li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>
This isn't well-documented, but since Foundation starts from a mobile-first philosophy, .text-center applies to small viewports. The breakpoint-specific class .medium-text-right then takes over on medium viewports, and will carry through on larger sizes as well.
If flex utility classes were otherwise important, you'd have no choice but to write media queries or, if using SASS, use breakpoint includes.
Here's a working Codepen demo to show the effect in action.
Did you try using the class align-center?
<ul class="vertical menu align-center">
<li><a title="My God, It's Full of Stars">Link 1</a></li>
<li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
<li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>
https://codepen.io/fontophilic-the-vuer/pen/VNamjy
I got this to work, while using the flex box classes correctly, by directly aligning text via the <a> tags themselves. Since the <a> tags are spanning 100% of the width of the menu you can control the alignment of the text inside of them directly on the <a> tag.
You have to give them a default alignment of text-center so it's centered on all screen sizes until it hits the specified medium-text-right and then goes right-aligned for all sizes medium and above.
<ul class="vertical menu medium-align-right">
<li><a class="text-center medium-text-right" title="My God, It's Full of Stars">Link 1</a></li>
<li><a class="text-center medium-text-right" title="They're moving in herds. They do move in herds">Link 2</a></li>
<li><a class="text-center medium-text-right" title="Klaatu barada nikto">Link 3</a></li>
</ul>
Please let me know if this answer is closer to achieving what you are looking for!
You just need to add small-only-text-center in li it'll only impact your li on small devices. Try this I hope it'll help you out. Thanks
Zurb Foundation also provide proper documentation for all utilities - https://foundation.zurb.com/sites/docs/v/5.5.3/utility-classes.html
Foundation 5:
<ul class="vertical menu align-right">
<li class="small-only-text-center"><a title="My God, It's Full of Stars">Link 1</a></li>
<li class="small-only-text-center"><a title="They're moving in herds. They do move in herds">Link 2</a></li>
<li class="small-only-text-center"><a title="Klaatu barada nikto">Link 3</a></li>
</ul>
I think Foundation 6 is not very mature yet. There medium-text-right works opposite for larger screen. Below code snippet will be works as per requirement. Try this I hope it'll help you out. Thanks
Foundation 6:
<ul class="vertical menu">
<li class="medium-text-right text-center"><a title="My God, It's Full of Stars">Link 1</a></li>
<li class="medium-text-right text-center"><a title="They're moving in herds. They do move in herds">Link 2</a></li>
<li class="medium-text-right text-center"><a title="Klaatu barada nikto">Link 3</a></li>
</ul>
I also created basic fiddle using foundation 6. Fiddle Example
Foundation Latest Version (6.5.3) CDN links using in Fiddle Example
https://foundation.zurb.com/sites/docs/installation.html#cdn-links
Well, needed that solution over here and Foundation is actually in 6.6.3
It's not the answer the OP are looking, but since i'm using SCSS i leave this here to help if someone is looking for the solution in SCSS.
.align-right{
justify-content: center;
#include breakpoint(medium){
justify-content: right;
}
}
You probably can achieve that through pure CSS and midia queries with a longer code.
I have a menu like this:
<div class="menu-hori" id="myMenu">
<ul>
<li>☰</li>
<li><a>1</a>
<ul>
<li><a>Sub 1</a>
<ul>
<li><a>SubSub 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
When I click the hamburger icon in the top ListItem, the menu opens. So the functionality is fine. Though it does not look nice, how can I use css to give it a smooth fold out? A nice flow down?
I want to separate certain elements in a dropdown menu option, with a simple solid divider. Ideally I want to have the links 'Pinterest', 'Twitter', 'Bloglovin' and 'Instagram' to appear above this divider and the link 'Email' to appear below the divider. So essentially I'm separating the first half of links from the second half with a divider.
Below is the html coding to the dropdown menu:
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
<li><a href='mailto:blankesque#hotmail.com'>Email</a></li>
</ul></li>
The link to my site is as follows - http://www.blankesque.com.
Any help with this issue would be greatly appreciated. Thank you in advance.
Iram
Just target the last <li> in the social <li>(I added the class .social to it), with :last-of-type and add a border-top
.social li:last-of-type {
margin-top: 10px;
border-top: 1px solid grey;
}
<li class="social">Social
<ul>
<li>Pinterest</li>
<li>Twitter</li>
<li>Bloglovin</li>
<li>Instagram</li>
<li>Email</li>
</ul>
</li>
I have a CSS3 menu, everything is working great but when I set the -webkit-transition: to expand the width and margin in the menu, when I hover on the ul not the button it shakes a little like 1px the left till the end of the transition.
You can check it here:
http://developers-community.com/beta/
Feel free to view source the website and go to the style.css as the menu is too big for jsFiddle.
<div id="my_menu">
<ul>
<li style="width: 98px;"><a class="menu" href="http://developers-community.com/">Home</a></li>
<li style="width: 98px;><a class="menu" href="about.html">About</a></li>
<li><a class="menu" href="#">Contact</a></li>
<li><a class="menu" href="#">Apps/Tabs</a></li>
<li><a class="menu" href="#">Web Services</a></li>
</ul></div>
Add this....this will work
Nevermind, I fixed it, I used tables instead of the center tag and it got fixed!
I have a group of images which each have their own links. I want the images to be in a list (<ul><li> .. etc) and have each item have a different background-image.
Would I run into any issues with something like this?
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
<li class="4"></li>
<li class="5"></li>
<li class="6"></li>
</ul>
You would do better to write it like this
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
Then you could add the background-image to either the a or the li.
However, you would style the as as display:block and give them the same height and width of the li. That way the background-image would show and the entire li would be clickable.
It is not valid HTML because the only thing allowed in an <ul> element is <li>s.
It's not valid HTML.
<!ELEMENT UL - - (LI)+ -- unordered list -->