Clever Geek Handbook

Placing dynamic navigation objects exclusively with CSS

I know I can achieve this with javascript, however I was wondering if anyone has any bright ideas on how this can be done with pure CSS so I can avoid the "jumping" effect that can be caused by performing various calculations after DOM loads and styles are applied or have to gip loads on every page change to hide this.

Basically, the navigation has a fixed width, say 960. The site is managed by a CMS, so a client can have 2 menu items or 10 menu items. Menu items should be sized according to the length of the text they contain, and each menu item should have the same padding:

enter image description here

enter image description here

Ideally, I would like to avoid using tables. I'm pretty sure what I am trying to achieve, not possible though

+3


source to share


1 answer


What you need is called the Flex-Box model. It is not implemented in all browsers. For testing purposes, yes, you can continue with the following CSS.

CSS

ul li {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
    display: box;
    box-orient: horizontal;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

You can see basic and advanced examples in Quick Images with Flexible Box Model .



Flexbox Model Layouts

Normal box
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex01.gif.pagespeed.ic.I78_V3_QCI. webp
Flexbox for the latest
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex02.gif.pagespeed.ic. sSh_w3N6ER.webp
Flexbox for the last two
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex03.gif.pagespeed .ic.QuC9JhvmNd.webp

+2


source






More articles:


All Articles