Mega menus are a new trend. These are drop-down triggered when an event is triggered by hovering over a link mentioned in the menu. This is used to show all options under the particular menu. This is used on e-commerce site where all the available options are listed under a particular category. To add mega menu we are using “mega-dropdown menu”, to the menu item which will display the items under its list. To separate the content we are using the tab classes like “tab-content” and “tab-pane”. Define the tab-pane with particular ID’s. Define the nav tab’s as toggleable with links to the tab-pane of mega-menu items. Check out the CSS for hovering and styling. As mega menus are dropdowns using hovering events, you must be careful to add this on the selected menu items. Use this for your e-commerce website by listing your items and images.
This is a classic example of the responsive navigation bar with no javascript needed. It uses clean HTML5 markup. This navigation bar is aligned to left but can be aligned to center or right. In mobile devices, the navigation bar is set on the top with the logo displayed whereas on the website it’s displayed on the left of the device. Toggling behavior can be seen by clicking on the toggle button. The dropdown is already set for some menu. The icon for each menu is set. CSS file defines responsive behavior using a media query. Navbar on the screen of width above than 767px will be displayed as block align to left, whereas for the screens below 767px the navigation bar will be displayed on the top of the page. Use this navigation bar for mobile applications to navigate to your custom links.
This is a stylish, elegant, and eye-catching navigation bar with the perfect match for fonts and color. This is a must use for sites like personal blogs. This uses the font awesome icons, to display details in each circle. The tag uses the main-navigation class which defines the navigation bar, which is followed by container. The span is styled with the circle, the shape is the eye catcher for this navigation bar. Try pointing the mouse on the link, and you would see the rolling effect of these circles. This effect is defined in CSS using “rotate(360 deg)”. The CSS also defines the media queries, for the screen with a maximum width. Check out other properties defined for this navigation bar. Use this navbar with your page and site, this is an eye-rolling navigation bar with fun to watch the links rollings. Source: "https://codepen.io/TomHergenreter/pen/qHkfb"
This is an example of a clean navigation bar for an educational site. The font and the style are a perfect match for the sites like tutorials. The navigation bar displays four links which can be linked to the pages like“Home”, “Tutorials”, “About”, and “Contact”. You can add more links to accommodate the pages of your site. You can have a nested link displayed using the numbered list for any given link. Using the and list tags, various topics can be categories. Mouse hover on the “Tutorials” and “Design” link and you would see the list of topics under “Design” displaying with effect. With the classes like “drop bottom” and “dropRight”, we can decide the direction of the list to be displayed. CSS adds effects like background-color, visibility, padding and most important for mouse hovering event. Use this navigation bar style for your website with your topics and links. Source: "https://codepen.io/rssatnam/pen/niBsD"
This is a stylish example of Navbar for social networking sites or web portal. It uses styles and scripts in the header part of the page. The navbar has an elegent color with other items like “followup”, “Collaborations”, “Media” with dropdown option to collect “Facebook” and Instagram. Navbar is placed in the body of HTML which acts as a container. Nav is decorated with classes like mb-4 for setting the margins of the bottom side and navbar-expand which gives the ability to expand and set the desired color in the navbar. Using navbar-brand the brand name of the company is set, you can go ahead and place a logo of a company. Median displays a drop-down: check out the nav-item dropdown class used to create links. This bar has a CSS style which sets the styles for classes. Tweak this code to add it in your webpage of social networking sites.
This is the classic example of Navbar for a personal web portal. It uses styles and scripts in the header part of the page. The navbar has an elegant color with other items like “Books”, “Movies”, “Songs”, “Dropdown” with an option to “search” in the portal. Navbar is placed in the body of HTML which acts as a container. The navigation bar is decorated with classes like "mb-4" to set the margin at the bottom and navbar-expand gives the ability to expand. Using navbar-brand the brand name of the company is set, you can go ahead and place a logo of a company. The dropdown has a drop down to check out the dropdown classes used to create links. This bar has a CSS style which sets the styles for classes. Tweak this code to add it in your webpage of an e-commerce website.