1. Full-Screen Navigation
This is an example of full-screen navigation. After clicking the menu button (for this instance, the “open overlay” button) the page will go full screen with different options for navigations. It usually has a close button if you wish to remain on the same page.
*References for the sample websites are in the last slide.
2. Navigation with hover drop-down list
This particular design is based from traditional navigation bars. Unlike other navigation bars with solid colored bars, this design seems to have floating texts. This design has a drop down list. When you hover the categories menu, it reveals several sub-categories.
3. Hidden Vertical Menu
This particular design uses Navicon. It is the three-line icon that you usually see in the Facebook mobile app and other websites. It gives the users the option to hide navigation bars as they scroll through the page. Some hidden menus automatically hides.
4. Hidden Menu to Full Screen Navigation
This is a combination of full-screen navigation and hidden menu. Just like the hidden vertical menu from the previous slide, it also has Navicon.
6. Scrolling Navigation
This may look like a traditional navigation bar, but it has a scrolling navigation feature. This allows users to navigate the website by just scrolling down. This is similar to popular templates in Wordpress where users can view more posts without clicking a “next page” button.
There are a lot of navigation bar designs all over the internet because web designers keep innovating navigation bars (or any
part of a website for that matter) for better user experience.
Related article:• 5 Basic Parts of a Website and Their Design Trends for 2015
The images were screenshots from the following websites:
1. http://www.campdavidfilm.com/2. http://tympanus.net/Development/FullscreenOverlay
Styles/index9.html3. http://michaelvilleneuve.fr/4. http://codyhouse.co/demo/full-screen-pushing-naviga
tion/5. Can be found at http://sumofy.me/ portfolio.6. https://disqus.com/websites/