css - Make Semantic UI menu collapse and responsive

Css - Make Semantic UI menu collapse and responsive

To make a Semantic UI menu responsive and collapsible, you'll want to use Semantic UI's built-in classes and some additional custom CSS for a fully responsive experience. Semantic UI provides utilities and components that can be used to create a responsive and collapsible menu.

Here's a step-by-step guide to achieving this:

1. Include Semantic UI

Ensure you have included Semantic UI in your project. You can use either a CDN or install it via npm.

Using CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

Using npm:

npm install semantic-ui-css

2. Basic Responsive Menu Setup

Create a basic menu structure with Semantic UI and use its classes for responsiveness.

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <div class="ui menu"> <div class="ui container"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Services</a> <a href="#" class="item">Contact</a> <div class="right menu"> <div class="item"> <button class="ui button">Login</button> </div> </div> <div class="right menu"> <div class="ui dropdown item"> Menu <i class="dropdown icon"></i> <div class="menu"> <a class="item" href="#">Item 1</a> <a class="item" href="#">Item 2</a> <a class="item" href="#">Item 3</a> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> </body> </html>

3. Making the Menu Collapsible

Semantic UI's menu component includes a responsive design by default. The menu items automatically stack vertically on smaller screens.

For more control, such as adding a hamburger menu for mobile views, you can use Semantic UI's sidebar component or custom JavaScript/jQuery.

Example with Sidebar:

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Menu with Sidebar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <div class="ui inverted menu"> <div class="ui container"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Services</a> <a href="#" class="item">Contact</a> <div class="right menu"> <a class="item" id="menu-toggle"> <i class="bars icon"></i> </a> </div> </div> </div> <div class="ui left vertical inverted sidebar menu"> <a class="item">Home</a> <a class="item">About</a> <a class="item">Services</a> <a class="item">Contact</a> <a class="item">Login</a> </div> <div class="ui dimmer"> <div class="ui text loader">Loading...</div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <script> // JavaScript for toggling the sidebar document.getElementById('menu-toggle').addEventListener('click', function() { $('.ui.sidebar').sidebar('toggle'); }); </script> </body> </html>

CSS:

/* Add custom styles if needed */

4. Customize Responsiveness

If you need to further customize the menu's behavior, you can use Semantic UI's built-in classes or write additional CSS and JavaScript as needed.

Example: Additional Custom Styles

/* Ensure the sidebar takes up the full height */ .ui.sidebar { height: 100%; } /* Hide the sidebar menu initially on smaller screens */ @media (max-width: 768px) { .ui.sidebar { display: none; } }

Summary

  1. Include Semantic UI in your project using CDN or npm.
  2. Create a basic responsive menu using Semantic UI's menu component.
  3. Use the sidebar component for a collapsible menu with a hamburger icon.
  4. Customize and style the menu as needed using additional CSS and JavaScript.

By following these steps, you can create a responsive and collapsible menu using Semantic UI that adapts well to different screen sizes.

Examples

  1. How to make a Semantic UI menu collapse into a dropdown on mobile?

    Description: Use Semantic UI��s responsive utility classes and JavaScript to transform the menu into a dropdown on smaller screens.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <style> /* Additional CSS for mobile view */ @media (max-width: 768px) { .ui.menu .item { display: block; width: 100%; } } </style> </head> <body> <div class="ui top fixed menu"> <div class="ui container"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Services</a> <a href="#" class="item">Contact</a> <a href="#" class="ui button" id="menu-toggle">Menu</a> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <script> $(document).ready(function() { $('#menu-toggle').on('click', function() { $('.ui.menu').toggleClass('visible'); }); }); </script> </body> </html>

  2. How to create a responsive Semantic UI menu with a hamburger icon?

    Description: Use Semantic UI��s Sidebar component to create a collapsible menu that includes a hamburger icon for mobile view.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <div class="ui sidebar vertical menu"> <a class="item">Home</a> <a class="item">About</a> <a class="item">Services</a> <a class="item">Contact</a> </div> <div class="pusher"> <div class="ui top fixed menu"> <div class="ui container"> <a href="#" class="item">Brand</a> <a href="#" class="ui button" id="menu-toggle">Menu</a> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <script> $(document).ready(function() { $('#menu-toggle').on('click', function() { $('.ui.sidebar').sidebar('toggle'); }); }); </script> </body> </html>

  3. How to use Semantic UI to make a menu collapse on smaller screens?

    Description: Combine Semantic UI��s menu classes with media queries to ensure the menu collapses appropriately on smaller screens.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <style> @media (max-width: 768px) { .ui.menu .item { display: none; } .ui.menu .item.mobile.show { display: block; } } </style> </head> <body> <div class="ui menu"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Services</a> <a href="#" class="item">Contact</a> <div class="ui right menu"> <a href="#" class="item mobile show">Menu</a> </div> </div> </body> </html>

  4. How to add a responsive Semantic UI menu with dropdowns?

    Description: Create a responsive menu with dropdown items using Semantic UI��s dropdown component for mobile views.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <div class="ui menu"> <a href="#" class="item">Home</a> <div class="ui dropdown item"> Services <i class="dropdown icon"></i> <div class="menu"> <a href="#" class="item">Web Design</a> <a href="#" class="item">Development</a> </div> </div> <a href="#" class="item">Contact</a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <script> $('.ui.dropdown').dropdown(); </script> </body> </html>

  5. How to implement a collapsible Semantic UI menu for different screen sizes?

    Description: Use Semantic UI��s responsive menu features and JavaScript to handle menu collapsing for various screen sizes.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <style> @media (max-width: 768px) { .ui.menu .item { display: none; } .ui.menu .item.toggle { display: block; } } </style> </head> <body> <div class="ui menu"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Services</a> <a href="#" class="item">Contact</a> <a href="#" class="item toggle">Menu</a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <script> $('.ui.menu .item.toggle').on('click', function() { $('.ui.menu .item:not(.toggle)').toggle(); }); </script> </body> </html>

  6. How to use CSS Flexbox to make a Semantic UI menu responsive?

    Description: Use Flexbox to create a responsive menu layout with Semantic UI that adjusts to screen sizes.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <style> .ui.menu { display: flex; flex-wrap: wrap; } .ui.menu .item { flex: 1; text-align: center; } @media (max-width: 768px) { .ui.menu { display: block; } } </style> </head> <body> <div class="ui menu"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Services</a> <a href="#" class="item">Contact</a> </div> </body> </html>

  7. How to create a responsive Semantic UI menu with hidden items?

    Description: Use CSS to hide menu items on smaller screens and show a menu button that reveals the items when clicked.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <style> @media (max-width: 768px) { .ui.menu .item { display: none; } .ui.menu .item.mobile { display: block; } } </style> </head> <body> <div class="ui menu"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Services</a> <a href="#" class="item">Contact</a> <a href="#" class="item mobile">Menu</a> </div> </body> </html>

  8. How to add a responsive Semantic UI menu with a toggle button?

    Description: Use a toggle button to show and hide the menu items on mobile devices.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <div class="ui top fixed menu"> <div class="ui container"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Services</a> <a href="#" class="item">Contact</a> <a href="#" class="ui button" id="menu-toggle">Menu</a> </div> </div> <div class="ui vertical menu" id="mobile-menu"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Services</a> <a href="#" class="item">Contact</a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <script> $(document).ready(function() { $('#menu-toggle').on('click', function() { $('#mobile-menu').toggle(); }); }); </script> </body> </html>

  9. How to implement a mobile-first responsive Semantic UI menu?

    Description: Design a menu with a mobile-first approach using Semantic UI��s responsive grid and utility classes.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <style> @media (min-width: 769px) { .ui.menu { display: flex; } .ui.menu .item { display: inline-block; } } @media (max-width: 768px) { .ui.menu { display: block; } .ui.menu .item { display: block; } } </style> </head> <body> <div class="ui menu"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Services</a> <a href="#" class="item">Contact</a> </div> </body> </html>

  10. How to create a Semantic UI responsive menu with submenus?

    Description: Use Semantic UI��s nested menu classes to create a responsive menu that includes submenus.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <div class="ui menu"> <a href="#" class="item">Home</a> <div class="ui dropdown item"> Services <i class="dropdown icon"></i> <div class="menu"> <a href="#" class="item">Web Design</a> <a href="#" class="item">Development</a> </div> </div> <a href="#" class="item">Contact</a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <script> $('.ui.dropdown').dropdown(); </script> </body> </html>

More Tags

automation public war tmp metatrader5 assert replace complexity-theory dot-matrix capacity

More Programming Questions

More Electrochemistry Calculators

More Weather Calculators

More Retirement Calculators

More Electronics Circuits Calculators