Preventing toggle from altering the width of the side navigation bar

Is there a way to prevent the width of the side bar from changing when toggling the top level items in the side nav bar, especially if the sub navigation items are wider? Click on 'Click me' in the side nav item to see what happens.

Check out this link for more information.

<!DOCTYPE html>
<html lang="en">
...
</style>
</head>
<body>
    <div id="navigation" style="float:left">
        <ul>
            <li> 
                <a href="#" onclick="swap('sectionOneLinks');return false;" class="filtersNav">Click me</a>
                ...
            </li>
            <li>
                <a href="#" onclick="swap('sectionTwoLinks');return false;">Click me</a>
                ...
            </li>
            <li>
                <a href="#" onclick="swap('sectionThreeLinks');return false;">Click</a><span  style="display:inline-block; float:right" class="icon icon-minus"></span>
                ...
            </li>
        </ul>
    </div>
     <div style="float: left">
            <ul class="navigation_primary">
                <li><a href >M</a></li>
                ...
            </ul>
        </div>
</body>
</html>

javascripthtmlcss

Answer №1

To ensure the main ul displays properly, you can set a fixed width like so:

#navigation ul {
  list-style-type: none;
  padding: 0px;
  width:80px;      /*Simply include this property to define the width*/
}

View the example below :

function toggleDisplay(targetId) {
    if (document.getElementById) {
      target = document.getElementById(targetId);
      if (target.style.display == "none") {
        target.style.display = "";
      } else {
        target.style.display = "none";
      }

    }
  }
.icon {
  position: relative;
  width: 1em;
  height: 1em;
  background-color: orange;
}

.icon-minus {
  position: relative;
  top: 0;
  left: 0;
}
.icon-minus:after {
  background-color: #fff;
  width: 8px;
  height: 2px;
  position: absolute;
  top: 7px;
  left: 3.5px;
  z-index: 4;
  content: "";
}
.icon-plus {
  position: relative;
  top: 0;
  left: 0;
}
.icon-plus:after {
  background-color: #fff;
  width: 8px;
  height: 2px;
  position: absolute;
  top: 7px;
  left: 4px;
  content: "";
}
.icon-plus:before {
  background-color: #fff;
  width: 2px;
  height: 8px;
  border-radius: 1px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  position: absolute;
  top: 4px;
  left: 7px;
  content: "";
}
#navigation ul {
  list-style-type: none;
  padding: 0px;
  width:80px;      /*Add this property for proper display*/
}

#navigation ul li {
  border-top: 2px solid orange;
  border-right: 1px solid orange;
  border-bottom: 1px solid orange;
  margin-bottom: 5px;
  /*   padding: 0;
margin: 0;
width: 140px; */
}
#navigation li {
  border-right: 1px solid orange;
  border-top: 2px solid orange border;
}
#navigation li li {
  border-top: 1px solid grey;
}
#navigation a {
  text-decoration: none;
}
<div id="navigation" style="float:left">
  <ul>
    <li>
      <a href="#" onclick="toggleDisplay('sectionOneLinks');return false;" class="filtersNav">Click me</a>
      <ul id="sectionOneLinks" style="display: none;">
        <li><a href="#">A link to a page aaaaaaaaaa</a></li>
        <li><a href="#">A link to a page</a></li>
        <li><a href="#">A link to a page</a></li>
        <li><a href="#">A link to a page</a></li>
      </ul>
    </li>
    <li>
      <a href="#" onclick="toggleDisplay('sectionTwoLinks');return false;">Click me</a>
      <span style="display:inline-block; float:right" class="icon icon-plus"></span>
      <ul id="sectionTwoLinks" style="display: none;">
        <li><a href="#">A link to a page</a></li>
        <li><a href="#">A link to a page</a></li>
        <li><a href="#">A link to a page</a></li>
        <li><a href="#">A link to a page</a></li>
      </ul>
    </li>
    <li>
      <a href="#" onclick="toggleDisplay('sectionThreeLinks');return false;">Click</a><span style="display:inline-block; float:right" class="icon icon-minus"></span>
      <ul id="sectionThreeLinks" style="display: none;">
        <li><a href="#">A link to a page</a></li>
        <li><a href="#">A link to a page</a></li>
        <li><a href="#">A link to a page</a></li>
        <li><a href="#">A link to a page</a></li>
      </ul>
    </li>
  </ul>
</div>
<div style="float: left">
  <ul class="navigation_primary">
    <li><a href>M</a></li>
    <li><a href>M</a></li>
    <li><a href>M</a></li>
    <li><a href>M</a></li>
  </ul>
</div>

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

"Switching Classes with a Click Event: A Step-by-

This script is designed to work with SoundCloud's widget in order to enable remote text buttons. I am attempting to modify it so that it functions as a remote for an image button that toggles between different pictures for pause and play, rather than ...

javascriptcssjquery

How to Disable Envmap in Three.js

Incorporating an environment map into my scene has been a successful endeavor. The lines of code involved are: sceneTarget.environment = envMap; and sceneTarget.background = envMap; Now, I am seeking guidance on how to disable the environment altogether. ...

javascriptthree.js

Using Ajax to seamlessly replace content with a smooth fade effect

Is it possible to add a fade effect to the code below, where the content of "demo" div is replaced with the content of "newpage.html"? <button onclick="loadDoc()">Click here</button> function loadDoc() { var xhttp = new XMLHttpRe ...

javascripthtmlajax

Nativescript encountered an issue while attempting to generate the application. The module failed to load: app/main.js

I'm currently experimenting with the sample-Groceries application, and after installing NativeScript and angular 2 on two different machines, I encountered the same error message when trying to execute: tns run android --emulator While IOS operations ...

javascriptandroidtypescriptangularnativescript

The duplication and multiplication of margin-left is occurring

I am baffled by the fact that margin-left is only affecting certain elements and causing frustration. .setting-container { position: relative; top: 60px; left: 0px; width: 100%; height: calc(100% - 60px); } .setting-topnav { width: 100%; h ...

htmlcssmargin

Executing a JavaScript Function in the Background using Cordova

Despite the numerous questions and plugins available on this topic, finding a solution has proven to be elusive for me. The most highly recommended plugin for this issue can be found here. My goal is to run MyService in the background, subscribe to the ON ...

javascriptandroidjquerycordova

Disabling prefetch in next.config.js: A comprehensive guide on eliminating data prefetching in Next.js

Typically, in many cases, the disabling of prefetching is achieved by specifically setting a link to not preload. An example of this can be seen below: <Link href="/about" prefetch={false}> <a>About us</a> </Link> My go ...

javascriptreactjsnext.js

What is the best way to ensure that the width of dropdown menu items corresponds precisely to the width of the content

I have implemented the Reactstrap drop-down menu: import React from "react"; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from "reactstrap"; export default class DropDownTest extends React.Component { cons ...

htmlcsstwitter-bootstrapbootstrap-4reactstrap

Exporting strings to a text file with line breaks using AngularJS is a simple and effective process

When importing a text file like this https://i.sstatic.net/uixNp.jpg, the date will be formatted as shown here: https://i.sstatic.net/p90lC.jpg. After formatting, an automatically exports a notepad containing the new formatted date. However, the issue is ...

javascriptangularjsline-breaksnotepad

JavaScript lacks the power to persuade the mouse into altering its cursor

I am encountering an issue with my ASP.NET page that contains an Infragistics webgrid. I have implemented Javascript methods to handle the mouseover and mouseout events on the grid rows, changing the mouse cursor to a pointer and back to the default as use ...

javascriptasp.netvisual-studio-2010mouseover

Is there a more efficient method for configuring mongo?

I'm dealing with a set of documents that are identical but can be categorized into two distinct groups based on their usage patterns. One group, referred to as "current", consists of a small number of documents that are queried frequently. The other ...

javascriptnode.jsmongodb

The predicament encountered with user registration in the realm of Node.js

I am encountering a problem with the sign-up route in node.js and MongoDB. Whenever I attempt to post data using Insomnia, it displays an error message. You can find the screenshot of the error [here](https://i.stack.imgur.com/qnGAv.png). Here is the code ...

javascriptnode.jsmongodb

Firefox causing issues with Rails Ajax functionality

My Rails application includes an AJAX call that currently triggers a JavaScript alert message. While this functionality works smoothly on Safari and Chrome, it strangely fails to function on Firefox (across all its recent versions). I tried debugging the c ...

javascriptjqueryruby-on-railsajaxfirefox

Is there a way to reposition the dynamically added URL path before the variables instead of after?

Just a brief introduction: In my Symfony-based ecommerce template, I have implemented a feature where all products from different pages are loaded using AJAX requests with an infinite scroll functionality. It works flawlessly when the URL is clear, like t ...

javascriptjqueryajax

Incorporate personalized design elements within the popup component of Material-UI's DataGrid Toolbar

I am in the process of customizing a Data Grid Toolbar component by making adjustments to the existing Grid Toolbar components sourced from Material-UI. For reference, you can view the official example of the Grid Toolbar components here. Upon clicking o ...

javascriptcssreactjsdatagridmaterial-ui

The Node REST API is slow to respond due to its lengthy processing time

I am facing an issue with my Rest API in node.js as it takes a long time to respond since it needs to request data from suppliers. The problem arises when the response is fully prepared but not displayed on the front end react side. I need a solution where ...

javascriptnode.jsreactjsapi

Tips for organizing the outcome of a seamless web scraping operation with Apify and Puppeteer

Extracting data from a table on the designated URL using Apify and Puppeteer is my current goal: https://en.wikipedia.org/wiki/List_of_hedge_funds The desired outcome should be an array of objects. Each element in the array must represent a <tr> ro ...

javascripthtmlweb-scrapingpuppeteerapify

ReactJS input range issue: Cannot preventDefault within a passive event listener invocation

I've been encountering some issues with the react-input-range component in my React App. It functions perfectly on larger viewports such as PCs and desktops, but on smaller devices like mobile phones and tablets, I'm seeing an error message "Unab ...

javascripthtmlreactjssliderrange

Viewing a document generated using the Google Drive API using the Google Drive Viewer

Using the Google Drive API, I am able to generate a document and receive some URLs: alternateLink : https://docs.google.com/document/d/xxxsome_idxxxxx/edit?usp=drivesdk embedLink https://docs.goo ...

javascripthtmlgoogle-drive-api

Building a Vuetify footer with perfectly centered content: A step-by-step guide

I currently have a setup where I am using the v-flex with a grid ratio of 2 / 8 / 2. This places my content in the center of the section with a width of 8, but the issue is that this centered content does not match up with the other elements on the website ...

htmlcssvue.jsvuetify.js