The Mega Menu based on CSS and HTML

jquery mega menu

The mega menu shared in this article can be used for showing the portfolio or for other purposes. As the mouse hovers over any item, the theme or placeholder for mega menu changes with its own content.

2 Demos of Angular side menu with Bootstrap navbar

Angular sidebar

Creating the sidebar with Angular and Bootstrap navbar The ng-bs-navbar is an Angular directive that can be used for creating the navbar based on Bootstrap, as well as it includes a handy sidebar. You may also place the icons from the materialIcon with the menu items. Developer page Download plug-in How to setup this Angular … Read more

2 Demos of jQuery Side Toggle Menu: sideToggle

jQuery side menu left

What is sideToggle plug-in? The sideToggle is a jQuery plug-in that you may use for creating the side toggle menu on your website. Basically, this plug-in toggles the elements sideways, however, the usage can be menus or toggling other elements. The jQuery default toggle behavior is towards up and down as explained in this tutorial … Read more

Create CSS and jQuery responsive menu/navigation

jQuery responsive responsive style

Creating responsive menus by a jQuery plug-in The simple and light-weight (1K) responsive-navigation jQuery plug-in enables creating responsive menus for your website. It uses font-awesome icons with the menu item and also creates sub menu that is adaptive to the user’s screen. Developer’s page Download plug-in Setting up responsive-navigation plug-in You need to include the … Read more

3 Demos of jQuery Context / right click Menu plug-in

jQuery context menu table

What is the contextMenu? The contextMenu is a lightweight solution for creating contextual menus on your web pages. The contextMenu will display as a user right clicks on a DOM element. You may associate this context menu plug-in with different elements in DOM like a div, form, table, etc. You may easily customize the look … Read more

jQuery and CSS Fixed Top menu on Scroll: LIVE DEMO

jQuery fixed menu

How to create a fixed menu on the scroll? In this tutorial, a jQuery and CSS based menu is shared that will be fixed on top as you scroll down the page. That way, your main content may appear on the top with the menu bar afterward. As the user scrolls down the page and passes … Read more

Bootstrap Sidebar Navigation Component

bootstrap sidebar slide

Creating responsive sidebar sliding menu bar in Bootstrap In this post, I am going to share a nice and simple sliding menu bar that slides from left to right. As you click the typical three horizontal lines of “mobile icon”, the menu will open in a sliding manner. As it opens, a cross icon will … Read more

How to change Bootstrap navbar color and other default properties?

bootstrap navbar class

The Bootstrap navbar classes The navigation bar in Bootstrap-based projects can be created by using navbar and its related classes quite easily. Bootstrap provides two styles that you may specify in the <nav> tag. These classes are: navbar-default navbar-inverse The navbar-default gives a grayish look to the navigation bar while inverse gives it black. In … Read more

23 Bootstrap header layouts: make header menu easily

bootstrap header left

The header layouts using Bootstrap framework In this post, I am going to share an excellent plug-in that works with Bootstrap for creating the header menu for your website. It includes 23 free templates that you may choose as per the need of your web project. The free code is included by the developer that … Read more

A Pure CSS off-canvas Menu with 2 Demos

CSS menu off-canvas

The off-canvas menu using pure CSS The off-canvas menu is the one that slides and overlaps the main content with the navigation links. Generally, you may need to use JavaScript to create this type of menu. In this post, an off-canvas menu is shared with pure CSS. This menu type can particularly be useful for … Read more

A CSS menu with tabs slider: live demo

CSS menu

The CSS tabs menu In this tutorial, a CSS menu is created which is tabbed style and slides as you click a menu item. The content of different tabs is contained in the same web page, so it can be used for the single-page web site. The navigation can be done by using mouse click … Read more

A mobile friendly (responsive) CSS and JS menu using media queries

CSS menu button

The CSS menu with JavaScript With the fact that mobile searches have crossed the desktop searches, this becomes necessary that your website is mobile friendly. The Google search engine also adds mobile factor as the ranking factor along with the tag in organic search results as: “This website is mobile friendly” (Update: This is showing … Read more

jQuery based Full screen responsive menu: 2 demos

jQuery full screen menu custom

The full-screen responsive menu In certain website designs, you may need to have a full-screen menu that overlaps the entire content that is visible to the user. In this tutorial, a jQuery plug-in is used for creating the responsive full screen menus. The menu, as clicked from the top right, will overlap the visible content … Read more

Add hover effect in Bootstrap nav by jQuery: 4 demos

Bootstrap hover nav

The hover effect in Bootstrap navs This is highly likely that you will use navigation menu whether it is a top, left or right menu as using the Bootstrap framework or any other website that contain links to the main pages, categories etc. Adding cool hovering effects as a user brings the mouse over any … Read more

A Bootstrap sliding side menu with jQuery: 2 demos

The right/left sliding menu in Bootstrap In this tutorial, the BootSideMenu plug-in is used for creating the sliding menus. The menu panel can be left or right that will close and open as you click the respective arrow. This may be useful if you have large content that overlaps when the menu is opened, otherwise, whole … Read more