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.
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:
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.