Drop-down navigation bar: Reason Clothing website

Reason Clothing is one of my personal favorite clothing brands, so I visit its website quite often. And one feature that I really like from this website is the drop-down navigation bar.

Screen Shot 2013-12-09 at 3.15.27 AM

When a viewer clicks on a part of the navigation bar with small plus sign next to it, the hidden menu shows. In this screenshot, I’ve clicked on “Shop +” menu, and it showed sub-menus such as ‘View All’, ‘Tees’, ‘Hoodies&Crews’, etc. Once the hidden menu shows up, the plus sign next to “Shop” changed to the minus sign. I like this feature because it allows the website’s visitors to shop easier and faster even though it’s just a simple drop-down menu. Also each menu word in the main navigation changes its color from white to red once clicked, so viewers can always remember what tab they’re looking through while they’re browsing the site. HTML code for this part is as follows:

Screen Shot 2013-12-09 at 3.15.49 AM

The main navigation and the drop-down menu are combined as one division named “multi-level-nav”, but then each one is divided into divisions named “tier-1” and “tier-2”. Then each menu is listed with <ul> and <li>, just as we use to make a navigation bar for assignments from this class.

So I can see it’s not too complicated to have this drop-down menu, and it definitely adds a lot to the site’s usability. This simple addition of hidden navigation helps the visitors to look through the brand’s products with only few clicks from the main page of the site.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s