Desktop users can enjoy the off-canvas menu feature, while mobile users will have access to the accordion menu option with Foundation 6

My goal is to customize my off-canvas menu in Foundation 6.3.1 so that it appears on desktop while displaying an accordion menu on mobile devices.

On desktop, I want the off-canvas menu always visible (see example).

For mobile, when the hamburger icon is clicked, I would like the menu to expand into an accordion style, instead of functioning as usual.

Here is the current code snippet provided:

    <div class="off-canvas position-left reveal-for-medium" id="masthead" data-off-canvas>

      <!-- start main navigation -->
      <nav class="main-menu">
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
        </ul>
      </nav>
      <!-- end main navigation -->

      <section class="copyright">
        <div class="row">
          <div class="small-12 columns">
            <p><small>&copy; 2017<br>All Rights Reserved.</small></p>
          </div>
        </div>
      </section>

    </div>
    <!-- off-canvas -->

    <div class="off-canvas-content" data-off-canvas-content>

      <!-- start title-bar -->
      <div class="title-bar hide-for-medium">
        <div class="title-bar-left">
          <span class="title-bar-title">Title Bar</span>
        </div>
        <div class="title-bar-right">
          <button class="menu-icon" type="button" data-open="masthead" aria-expanded="false" aria-controls="masthead"></button>
        </div>
      </div>
      <!-- end title-bar -->

      <!-- start body content -->
      <main class="body-content">
        <p>Welcome, one and all.</p>
      </main>
      <!-- end body content -->

    </div>
    <!-- off-canvas-content -->

  </div>
  <!-- off-canvas-wrapper-inner -->
</div>
<!-- off-canvas-wrapper -->

I am aware that achieving this could involve using hide/show classes, but duplicating the menu for this purpose seems inefficient to me. Any suggestions or solutions are appreciated. Thank you for your time!

Answer №1

To customize your hamburger menu, consider changing the positioning to either fixed or absolute. Another option is to include an additional close button within your position-left container. You can also modify the offcanvas CSS with the following code:

.position-left {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  overflow-y: auto;
}

.position-left.is-open~.off-canvas-content {
    transform: translateX(100%);
}

Be sure to adjust your menu using media queries as needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The JavaScript code is not running as expected!

i have this index.html file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...

What is the best way to make tooltips track a specific data point they are connected to in D3?

I am working with a figure created using D3 that includes tooltips appearing near a data point when hovered over and can be pinned by clicking on the point. I have implemented the functionality to change the plotted values for the points by clicking on spe ...

Creating a custom Jquery easing function with an arrow that moves up and down

I am trying to implement Jquery easing with two arrows (an up arrow and a down arrow). It should look like there is a circle at the top of the box containing an up arrow and a down arrow. The idea is that when the box moves down, the up arrow appears, and ...

In IE9, the margin: auto property does not effectively center a div element

I'm trying to center a content div in the space leftover by a sidebar. Here's how I want it to look: After some trial and error, I was able to achieve this for most browsers by using margin: auto on the specific div, along with setting overflow: ...

Elements that possess identical class attributes yet exhibit dynamic behavior

I'm currently facing challenges with dynamically generated elements. I am working on a page for my website that will show a list of users (data provided by the controller). Each user is represented within a div, containing two h3 tags displaying the u ...

The issue with Angular 4 imports not refreshing in a .less file persists

Currently, I am in the process of developing a small Angular project that utilizes less for styling purposes. My intention is to separate the styling into distinct folders apart from the components and instead have a main import file - main.less. This fil ...

Problem with maintaining the alternating background color of table rows while using jQuery's animate() function

I have an HTML table that I styled with alternating row background colors. <table class="tb_record"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> < ...

Using jQuery UI to style div elements with dynamic titles

Is it possible to style a standard div container using the same styling as jQuery dialogs? I am looking to create a div panel with text content but with the title bar styling similar to that of jQuery UI dialog boxes. Appreciate your assistance in advance ...

Unable to remove both top and bottom drop shadows

Even after using the code below, I am still unable to remove the small drop shadows at the top and bottom. How can I get rid of them completely? div#inner_container { width: 960px; margin: 0 auto; background-color: rgb(255, 255, 255); box-shadow:0 9 ...

Troubleshooting JavaScript directly on the client side

As a JavaScript beginner hoping to transform into a JavaScript expert, debugging is an essential skill I must master. Currently, I am utilizing Chrome debugger tools to tackle a complex array of spaghetti JavaScript code that resembles a cryptic puzzle wai ...

Executing a script within an ASP.NET MVC Project

Currently, I'm in the process of developing a project in MVC that requires using AJAX to fetch XML from an external source. However, I have encountered a challenge where I am unable to directly make the AJAX call due to a XMLHttpRequest same domain po ...

Change the location of an html td element with JavaScript

I am currently working on a simple JavaScript car racing game where the cars are represented by HTML table elements. I want to implement functionality where pressing the "e" key moves player one's car and the "d" key moves player two's car. This ...

Adaptable Collection of 4 Images

I am facing a challenge in replicating eBay's 'Today' featured seller layout with 4 square images creating one box (refer to the image). I am using Bootstrap for this task, and I am finding it difficult to comprehend how to achieve this. I h ...

Issue with sender field in contact form and mailer function

Having issues with my contact form that has 3 fields and a textarea... I've used jQuery for validation and PHP to handle email sending. The contact form is functioning correctly, but the From field in the received emails is not displaying as expect ...

Are there any methods to alter the current preFilters within jQuery?

Is there a way to access and manipulate the internal jQuery preFilters using the jQuery.ajaxPrefilter() function? In version 1.11.1, I noticed a private preFilters object declared on line 8568, but it doesn't seem like there is a built-in method to in ...

Blur transition on CSS-defined borders

Looking to create a large button with a blurred background image that unblurs on hover. I've implemented a container with overflow hidden and adjusted the margin on the background image for defined edges. However, during the transition from blurred t ...

Transforming a traditional HTML/CSS/JS website into a cutting-edge React application using Tailwind CSS styling

I have a unique website template complete with HTML, CSS, and all necessary assets. Now, I am looking to develop a React JS application using this template. Firstly, I am wondering: Since I typically use Tailwind CSS for my other projects, would it be mo ...

Is there a way to implement an onclick event on a specific line of text that triggers a popup box only when the text is clicked, without the popup appearing automatically when

I received assistance from a fellow user to customize a popup that turned out great. However, I'm having trouble getting the onclick function to work properly so that the popup only appears when the phone number is clicked. Ideally, I want the phone n ...

What is the best way to display a div beneath the highlighted text within a textarea field?

I have encountered a situation where I want to display a div (like a popup) when text is selected in a text area. However, when using mouse-down for this action, the position of the div sometimes does not align directly below the selected text. Below is t ...

Please provide both an image and text in addition to a progress bar by using the form to

I am working on a form that needs to store both images and text data in a database. <form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm"> <input name="name" type="text" /> <input name="age" ty ...