22

If you’re working on a responsive layout website with navigation that contains too many links to display either horizontally or vertically on smaller screens, you may need to implement a technique where only few links are visible by default and a drop-down is added for the rest of the links.

Once you go through the toughest exercise of deciding which links should be visible at all times, here is a way to execute the design.

HTML

Here is a pretty simple navigation using an unordered list and some anchor tags. Nothing special except an extra <li class=”show-more”> element that will be hidden on wide screens and class “hide” added to the list items you will be hidden on smaller screens.

The <ul> element also has a helper class “clearfix” added to it, so our nav bar can take care of all the floats.

Related Posts:

01

Every time I start working on a new project, I make it my goal to write the leanest and meanest code possible.

Often, it’s enough to ask simple questions such as:

How can I execute this with less markup or fewer CSS selectors?

Can I use sprites for all images?

Is there a better way to do something than what I’ve done before?

Would CSS3 work better in this case?

How will any back-end code or CMS implementation affect my code?

But what’s better then a list of questions? A list of tips or solutions.

So here it is. Feel free to comment and add to it as you see fit.

HTML/CSS Tips

1. Limit the use of ID’s for layout sections such as #wrapper, #header and #footer and use them more for JavaScript hooks. Overusing ID’s for layout can create specificity issues and unnecessary duplication of styles.

2. Use Object Oriented CSS. For example, avoid declaring a UL tag based on a location:

ul {...}
.sidebar ul {...}

Instead, assign a class to the UL that is different.

ul {...}
.nav-list{...}

Using this approach, you are acomplishing two things:

You are creating completely re-usable styles that can be applied to any UL tag (object) no matter where its located on the page.

You improve the site performance. Descended selectors such as .sidebar ul are (marginally) slower. Browsers read right-to-left, meaning that they first find the UL element and then traverse up the DOM until they find a specified parent, in this case the class “.sidebar”.

3. Use sprites whenever possible to reduce number of HTTP requests. Here is an example of a sprite image:

Related Posts:

05

I’ve never had a need to use any of Photoshop’s 3D features and probably never will, but the other day I decided to play with it a bit. The play resulted in this CSS Box Model info graphic.

CSS is a 2D medium and representing it’s box model in 3D was a little tricky. But I think it turned out pretty well. I am using one PNG graphic as a background image, and some CSS and jQuery for positioning and interactivity.

Margin – Clears an area around the border. The margin does not have a background color, and it is completely transparent.
Border – A border that lies around the padding and content. The border is affected by the background color of the box.
Padding – Clears an area around the content. The padding is affected by the background color of the box.
Content – The content of the box, where text and images appear.

margin: 12px;

border: 10px solid red;

padding: 8px;

width: 100px;

height: 100px;

Go ahead and hover over some of the CSS property/value pairs above to see details.read more