Javascript nav menu

Javascript nav menu DEFAULT
Simple Multi-level Offcanvas Menu In Vanilla JavaScript

A simple, mobile-first, multi-level off-canvas menu written in vanilla JavaScript.

DemoDownloadTags: off-canvas menu
CSS Only Responsive Dropdown Navigation

A CSS only, fully responsive dropdown navigation that reveals sub-menu items on hover (desktop) or tap (tablet & mobile).

DemoDownloadTags: dropdown menu
Swipeable Off-canvas Navigation For Mobile - Mobile Swipe Menu

A mobile-first off-canvas navigation that enables the user to reveal and hide the side menu by clicking the toggle button or by swiping the screen.

DemoDownloadTags: mobile menu, off-canvas menu
Beautiful Dashboard Sidebar Menu Template

A beautiful, responsive, collapsible sidebar menu (also called offcanvas menu) created for dashboard & admin panel projects.

DemoDownloadTags: off-canvas menu, side menu, sidebar
navbar-into-bottom-navigation

A mobile-friendly navigation system that transforms the site menu into a bottom navigation bar on small screens.

DemoDownload
Responsive Sidebar Using Bootstrap 5 Offcanvas

A responsive and mobile-first off-canvas sidebar navigation built using Bootstrap 5’s offcanvas component.

DemoDownloadTags: bootstrap, Bootstrap 5, off-canvas menu, sidebar
smooth-collapsible-sidebar-navigation

A modern sidebar navigation with smooth expand & collapse transitions, written in CSS/CSS3 and vanilla JavaScript.

DemoDownloadTags: side menu, sidebar
box-shadow-sticky-nav

A pure CSS implementation of the drop-shadow effect, which appears below a header navigation bar when we start to scroll the page.

DemoDownloadTags: shadow, sticky navigation
Sidebar Menu With Curved Outside Effect

An expanding sidebar navigation menu with a curved outside effect.

DemoDownloadTags: side menu
show-hide-navbar-scroll-down-up

A smart and user-friendly sticky navbar component that automatically shows and hides itself depending on the scroll direction.

DemoDownloadTags: sticky navigation

© 2013-2021 CSSScript.com, A jQuery Plugins Subsite. All rights reserved.

Sours: https://www.cssscript.com/categories/menu-navigation/

20 Excellent JavaScript Navigation Techniques and Examples

JavaScript allows you to add interactivity and feedback, making the user’s experience better and more intuitive.

Recently we showed you some exceptional CSS navigation techniques and we’d like to follow that up with an article about JavaScript-based navigation examples that you can use. Keep in mind that some of these techniques might not work if the client browser has JavaScript turned off (on average, 5% of users have JS disabled according to W3 web statistics).

In this article you’ll discover some terrific and unique JavaScript-powered navigation techniques and examples.

Tip: clicking on each image will take you directly to the demo page of the navigation menu technique if it’s on a separate page. Their names will take you to their project web page.

1. MenuMatic

This example takes semantic ordered or unordered list of links and turns it into a dynamic drop down menu system that can be vertically or horizontally oriented.

menumatic

View Demo Page

2. Animated Menu using jQuery

A technique for animating menu items when a user hovers over them. Source files, including the PSD file, are available to download.

Animated Menu using jQuery

View Demo Page

3. Garagedoor Effect using jQuery

Gaya Kessler presents a wonder JavaScript menu that mimics the real garage door using jQuery.

Garagedoor Effect using jQuery

View Demo Page

4. JGlide Menu

A very unique menu that floats on the page. Users can drag it to a position they desire.

JGlide Menu

View Demo Page

5. Vertical Sliding jQuery Menu

HVDesigns presents a menu that drops down and reveals more links.

Sliding jQuery Menu

View Demo Page

6. Perspective Tabs

You can have scrolling tabs with animation using this technique.

Perspective Tabs

View Demo Page

7. Vertical Digg-like Menu

Antonio Lupetti presents a Digg-like menu that uses simple JavaScript.

Vertical Digg-like Menu

8. LavaLamp

When you hover an item, you’ll see the CSS sliding door technique created using jQuery. An alternate version for MooTols can be here.

LavaLamp

9. Fisheye Menu

If you’re a big fan of the Mac dock you will enjoy this menu.

Fisheye Menu

10. Simple JavaScript Accordions

A great technique for integrating accordion-style menus into your site.

Simple JavaScript Accordions

View Demo Page

11. Sliding JavaScript Menu Highlight

This sliding hover effect script is an easy technique for highlighting menu items.

Sliding JavaScript Menu Highlight

12. Fading Menu – Replacing Content

This technique allows you to fade in and fade out menu items.

Fading Menu - Replacing Content

View Demo Page

13. Simple Multi-level Drop-Down Menu

A simple JavaScript drop down menu tutorial.

Simple Multi-level Drop-Down Menu

14. Using jQuery for Background Image Animations

A technique for creating animated menus using jQuery and CSS background-position properties.

Using jQuery for Background Image Animations

View Demo Page

15. Mootools Redux

A menu using MooTools that expands the link’s font size when you mouse over the item.

Mootools Redux

View Demo Page

16. HoverAccordion/Sidebar Menu

This is an accordion plugin which can be used as a vertical sidebar menu too.

Using jQuery for Background Image Animations

17. UvumiTools Dropdown Menu

Another JavaScript menu based on MooTools with lots of features.

UvumiTools Dropdown Menu

18. jQuery UI Tabs

Easily separate content using this tab example.

jQuery UI Tabs

19. Proto.Menu: Right Click Menu

A customizable right-click menu written on top of the Prototype framework.

Proto.Menu: Right Click Menu

20. Accessible Expanding and Collapsing menu

This menu example allows you have two levels of navigation. When you click on main category the subcategory expands.

Accessible Expanding and Collapsing menu

View Demo Page

What are you using?

We’d like to know if you have experience with any of these techniques and examples. Have a live web page? Share it with us in the comments.

Related content

About the Author

Kawsar Ali is a web designer, graphic designer, and wannabe photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

Sours: https://www.webfx.com/blog/web-design/20-excellent-javascript-navigation-techniques-and-examples/
  1. Omaha craigslist farm
  2. Yellow storage cubes
  3. Sofa cover ebay
  4. Sun blade 5e

NAVX

Website navigation is an integral part of web design and it serves the critical yet simple goal of helping the visitor know where he is and where to proceed next. So if you are looking for Javascript library to add navigation menus in your site, here are 20 Javascript Navigation Menu Libraries 2019 to use in your app.

It is a Javascript libary to make awesome navigation menu with all the classic menu elements like vertical and horizontal dropdowns, megamenu panels, lists, and tabs. They are highly configurable and easy to use. It can be also used as a fixed navigation, a transparent navigation, a hidden navigation and a fullscreen navigation and more. Do you need to create a navigation component, but are you lacking in creativity? No problem, it has more than 40 navigations ready to use. Just copy and paste the code.

NAVX - Ultimate Navigation Plugin

Pushbar.js is a tiny javascript plugin for creating sliding drawers in web apps It is fully customizable and dependency free.You can use it as sidebar menus or option drawers.

Pushbar.js

This library aims to provide a highly configurable, ready-to-use sliding menu for your next web application, while delivering native-like animation performance.

SuperSlide.js

A JavaScript library to make navigation menus highlight the item based on currently in view section.

MenuSpy

A touch slideout navigation menu for your mobile web apps.

Slideout.js

Spatial navigation is the ability to navigate between focusable elements based on their position within a structured document. Spatial navigation is often called ‘directional navigation’ which enables four(top/left/bottom/right) directional navigation.

JavaScript SpatialNavigation

This is a responsive menu framework for creating professional looking horizontal and vertical navigations. The menu is built on CSS3, XHTML5, jQuery and comes with many great features and options, over 70+ beautiful themes, over 100+ examples included, a 12 column grid system, vertical and horizontal tabs and much more.

Droop Mega Menu

Animated wheel navigation JavaScript library based on Raphael.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.

wheelnav

A light-weight, responsive, mobile-like navigation menu plugin.

Slinky

It is a user-friendly, highly customizable and responsive jQuery mega menu plugin. It allows you to use multiple menus with different submenus.

SmartMenu - Responsive jQuery Mega Menu

It is a menu component based in CSS and pure Javascript (no JQuery needed). JET is fully compatible with Bootstrap and ready to use in mobile phones, tablets and desktop devices.

Jet - Responsive Megamenu

Build your mobile-first web projects with web slide navigation system that’s give you all type of ready made responsive menu items for your any type of websites. Made with pure css, html, jquery, so you can customize it as you want that suits your website layout.

Web Slide - Bootstrap 4 Mega Menu Responsive

A configurable and animated radial menu. BloomingMenu is a port of AwesomeMenu for the web.

Blooming

Circular navigation with radius and angle control.

Curved Menu

A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them.

Vertical Fixed Navigation

An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.

React burger menu

It is an experimental frontend library to develop zoomable user interfaces (ZUI). It is based on vue.js and JavaScript and comes with a set of components to create unconventional user interfaces.

Zircle-ui

It is a lightweight accessible pure javascript plugin that will move your menu items if they don’t fit its parent.

PriorityNav

It is a tiny JavaScript plugin which weighs only 1KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance.

Responsive Nav

It is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive. It uses CSS3 transitions in modern browsers and fallbacks into jQuery.animate when they are not supported.

Sidr

The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customizable through a wide range of options, extensions and add-ons and it will always fit your needs.

jQuery.mmenu

Sours: https://bashooka.com/coding/20-javascript-navigation-menu-libraries/

How TO - Side Navigation

❮ PreviousNext ❯


Learn how to create an animated, closable side navigation menu.


×AboutServicesClientsContact

×AboutServicesClientsContact






Try it Yourself »

Create an Animated Side Navigation

Step 1) Add HTML:

Example

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>

<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
<div id="main">
  ...
</div>


Step 2) Add CSS:

Example

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}



Step 3) Add JavaScript:

The example below slides in the side navigation, and makes it 250px wide:

Sidenav Overlay Example

/* Set the width of the side navigation to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Try it Yourself »

The example below slides in the side navigation, and pushes the page content to the right (the value used to set the width of the sidenav is also used to set the left margin of the "page content"):

Sidenav Push Content

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Try it Yourself »

The example below also slides in the side navigation, and pushes the page content to the right, only this time, we add a black background color with a 40% opacity to the body element, to "highlight" the side navigation:

Sidenav Push Content w/ opacity

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Try it Yourself »

The example below slides in the side navigation from the left and covers the whole page (100% width):

Sidenav Full-width:

/* Open the sidenav */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

/* Close/hide the sidenav */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Try it Yourself »

The example below opens and close the side navigation menu without animations:

Sidenav without Animation

/* Open the sidenav */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}

/* Close/hide the sidenav */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

Try it Yourself »

The example below shows how to create a right-sided navigation menu:

The example below shows how to create a side navigation menu that is always shown (fixed):

Always show sidenav:

/* The sidenav */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Page content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
}

Try it Yourself »

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.


❮ PreviousNext ❯


Sours: https://www.w3schools.com/howto/howto_js_sidenav.asp

Menu javascript nav

Build a responsive Javascript nav menu

Responsive web design (RWD) has had an enormous impact on how our industry develops websites and applications for different devices. Everywhere we look there are new techniques, tools, and thoughts on the subject. RWD provides us with the tools we need to create awesome experiences for the multitude of devices that our users have.

Ethan Marcotte's original article outlines the three core pieces of a responsive design: fluid grids, flexible images and media queries. While JavaScript isn't one of these foundations of RWD, it does allow developers to enhance interactions and create richer experiences for users. Many people (myself included) would argue that our content should be available to users without JavaScript enabled. This is where we tread a fine line between using JavaScript to make our websites more usable and hiding content behind a JS wall.

If you spend any time writing JavaScript for RWD you're sure to come across the work of Scott Jehl of the Filament Group. It's fortunate for us that there are such people creating and sharing tools to help move responsive design forward.

Let's build something

I don't have a specific breakdown of how much time we spend on each section of our websites, but we generally devote more to the navigation (especially for large sites) than any other aspect. Ensuring we have the right content, making sure it's organised well, it's easy to get to, is accessible, and functions on all of the devices we can get our hands on, can be time-consuming, to say the least.

So, to make our lives easier, let's build some responsive navigation. A few goals for this navigation are:

  1. To work well on small and large screens.
  2. To work in Chrome, Safari, Firefox and IE (8+).
  3. To work with or without JavaScript.

The markup

If you're not using the files from the tutorial, now would be a great time to at least copy base.css. Since our focus here is on the JavaScript, we're not going to look much at the CSS. Go ahead and grab the index.html file from the tutorial files and let's get started.

Once you've looked at the HTML, you may be asking yourself: why is the nav in the footer? Good question. One of our goals was to make the navigation available to non-JavaScript users. For users on small screens without JS, we don't want the nav to eat up the screen when they visit the page. So in the header, we have a link to the navigation, which exists (expanded) in the footer.

Smallest first

It's generally much easier to build responsive sites if you start with the smallest size and work up from there. At this point, you should have a navigation that works at a small size with JavaScript turned off, has a Show Nav link (that currently does nothing) at this size when JavaScript is enabled, and works with a simple hover at large sizes both with and without JavaScript.

Let's start adding some JavaScript to breathe a bit of life into the smallsize navigation. You'll need to add references to jQuery and the navigation JavaScript just before the closing body tag of index.html.

We're going to start with the following in nav.js. This will create an object (window.NAV) to contain all of the code to control our navigation:

The init method above contains all of the necessary setup. Here it's calling NAV.bindEvents, which is using jQuery to bind a click event to anything with a class of js-togglesOffCanvas, to call the NAV.toggle method.

NAV.toggle is going to stop the default event from firing (so we don't follow links we don't want) and use jQuery to toggle the mainMenu-is-open class on the body. This will set up the CSS rules to move the .mainNav div (currently positioned off the left side of the screen) into view using CSS transforms. Using translate3d forces hardware acceleration in WebKit. So, we can detect what is available using Modernizr and use translate3d (if available) for smoother animations.

Since our event is bound to the class js-togglesOffCanvas, you'll need to add that class to the show link in the header:

You should now have a navigation that slides in from the left side at a small size when you click the Show Nav link. But wait – we don't have a way to close the navigation now that we've opened it. Let's fix that.

I'd like to have a button at the top left in the same place the open link was before we slid it right. I'd also like to be able to click anything to the right of the navigation to trigger a close. Instead of trying to add an event listener to everything on the right-hand side, let's drop in an overlay div and listen for clicks on it. Create a JS variable to store the markup and add to our NAV object:

We'll then add a line to the init method to add this div to the DOM. This way we're only adding this if we have JS and the off-canvas nav might be activated.

If you want to see that div, add a class of visible: as this element is invisible this can be helpful for testing. Now's a good time to add the close button to the nav itself. Add a <button> just inside of <div class="mainNav">:

Now we can close our navigation - a relief - though we can't get to the second-level links in this off-canvas state. We can do something about this via a couple of changes to our nav.js file. First, add this method to the NAV object:

Next, add a click handler for .js-togglesSubMenu to NAV.bindEvents.

Add the js-togglesSubMenu class to any link that should open a submenu <ul> in index.html.

This navigation is really coming together now, but if you mess around you can find a few issues. The first shows up when the off-canvas nav is open and a media query change causes the layout to switch to the non-off-canvas layout. Everything looks broken: the body element still has a class of mainMenu-is-open applied. Also, if you open then close a submenu, the hover effect on it at the larger size won't work - a problem if the breakpoint at which that switch happens lies between portrait and landscape modes of a handheld device.

Currently, browsers don't fire events when media queries change state. But newer browsers do have access to determining whether a specific media query is applied through the matchMedia API. For this case, I'll use a wrapper, mediaCheck, which I wrote around the matchMedia API. It lets us set up functions to execute when a media query becomes, or stops being, active. To do so we add a reference to mediaCheck in index.html just before nav.js:

Next, we will need to add the code to tell mediaCheck what media queries to watch and also what to do when they change. Add these lines at the end of init function().

Now add the NAV.clear method. Remove the mainMenu-is-open class from the body, resetting elements moved to make way for the nav back to their right places, and removing inline styles the jQuery animations added to elements:

Now, whenever the browser width becomes greater than or equal to 35ems the mainMenu-is-open class and the inline styles from jQuery will be removed.

Another issue that exists is that the transitions that create the off-canvas sliding animation are still applied when the nav switches between contexts. This results in a fairly ugly shift between media queries. We can build upon the fix for the first issue by adding the following method to window.NAV:

Modify the mediaCheck call in the init method like so:

And finally, modify line 80 of base.css to be:

Now the transitions are tied to the enableAnimations class being present, and that class is only applied at the small size.

You'll notice the third issue if you try to click on the products menu at the larger size. Viewing the second-level nav at this size should be handled by the hover. The click handler we applied to deal with the smaller size is still firing.

This is a bit trickier. I originally developed a solution, but with the help of Adam Simpson have made big improvements. Look at app.js in the tutorial files and you'll see a method definition for APP.getState, which injects an element with an ID of sizeTest into the page. This element picks up styles from the CSS, which it uses to get an idea of what size the browser is relative to the defined media queries. Add the app.js reference to index.html:

In the CSS you'll find the following declarations (this is a bit of a hack):

APP.getState checks the font-size of this element to return a string (which you can define): either small or large. We've tried other approaches, but this has the best cross-browser/device support. This can then be used to control the logic flow of our JavaScript. NAV.toggleSubNav becomes:

Now the JavaScript toggle will only happen at the small sizes.

Conclusion

At this point you should have pretty solid navigation that will work almost anywhere. If want to delve further, I'd recommend following Scott Jehl, Brad Frost and Sparkbox: we've only scratched the surface of what we can do to enhance our responsive websites using JavaScript.

Words:Rob Tarr

This article by Rob Tarr originally appeared in net magazine issue 245.

Sours: https://www.creativebloq.com/javascript/build-responsive-javascript-nav-menu-31411118
Responsive Navigation Menu Bar using HTML CSS \u0026 JavaScript

Let's build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.

Hello everyone! In this tutorial lets build a responsive navbar and hamburger menu using html,css and a little bit of javascript.

This is how it will look,

Alt Text

Github link :

Here, we have

  • with the class of which work as a container of our navbar
  • with the class of
  • a link with the class of
  • with the class of
  • inside the we have 4 s with the class of
  • inside each we have a link with the class of
  • for our hamburger I have added a with the class of and inside which we have 3 s with the class of

So this is the HTML that we need.

(Here we will import the font we need and add some basic CSS to reset all the default styles.

  • basic styles for our other elements

After this, It should look like this,

Alt Text

What this media query does is, hides our by setting on it.
Also, we set our to so it's visible now.
We have also added an extra class that is which sets on the . Now we will have to add the javascript which will add this class on the nav-menu when we click our hamburger.

Here the function also adds an class on our and our which makes our mobile menu open. we can use the active class on the hamburger to create that X animation when we click on the . so let's do that now.

It should look like this now,

Alt Text

But there is a catch, the hamburger menu doesn't close when we click a link. So let's add that now,

The function removes the class from both the and the which makes our mobile menu close.

Alt Text

So that's it guys we built a responsive navbar and hamburger menu with HTML CSS and javascript. Hope u liked it. Share this article. Thank you 😀

Sours: https://dev.to/devggaurav/let-s-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript-4gci

You will also like:

How TO - Responsive Top Navigation

❮ PreviousNext ❯


Learn how to create a responsive top navigation menu with CSS and JavaScript.


Responsive Navigation Bar

Resize the browser window to see how the responsive navigation menu works:

Try it Yourself »


Create A Responsive Topnav

Step 1) Add HTML:

Example

<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

The link with class="icon" is used to open and close the topnav on small screens.


Step 2) Add CSS:

Example

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}



Add media queries:

Example

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


Step 3) Add JavaScript:

Example

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

Try it Yourself »

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.


❮ PreviousNext ❯


Sours: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp


1503 1504 1505 1506 1507