Horizontal Navigation in a Responsive Layout

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.

<ul class="nav clearfix"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li class="show-more"><a href="#">…</a></li> <li class="hide"><a href="#">Team</a></li> <li class="hide"><a href="#">About</a></li> <li class="hide"><a href="#">Contacts</a></li> </ul> read more

Related Posts:

  • No Related Posts

CSS Step by Step Menu (Wizard Style)

Here is another way to create CSS based step by step or wizard style menu without any images, just using pure CSS. It works perfectly with themed web apps that need to be quickly and easily updated.

Related Posts:

Write Smarter HTML & CSS

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:

[flickr id=”5886212311″ thumbnail=”medium” overlay=”false” size=”full” group=”” align=”none”]

Sprites can be tricky to create and implement, so here are some techniques that served me well in past:

a. Create one compound selector for each sprite image. This makes your CSS file smaller and easier to maintain.

body,
.button,
.icon,
.box,
.column,
#footer{
background:url(images/sprite.png) no-repeat;
}

b. Create separate sprites for repeat-x, repeat-y and static backgrounds.

For repeating sprite backgrounds, the individual images should have same height (repeat-x) or width (repeat-y). Here is an example of a vertically repeated sprite background:

[flickr id=”5886212231″ thumbnail=”medium” overlay=”false” size=”full” group=”” align=”none”]

Vertically Repeating Background CSS

/* defines background image */ .vertical-sprite{ background:url(repeat.jpg) repeat-x; } /* repeats top section of the sprite "green gradient" */ .obj-one{ background-position: 0px 0px; height:77px; } /* repeats middle section of the sprite "orange gradient" */ .obj-two{ background-position: 0px -77px; height:48px; } /* repeats bottom section of the sprite "blue gradient" */ .obj-three{ background-position: 0px -125px; height:76px; } read more

Related Posts:

CSS Box Model Info Graphic in 3D

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

Related Posts:

© Copyright Emir Plicanic - Theme by Pexeto