Step-by-step guide on creating a draggable navigation bar:

I am encountering an issue creating a droppable menu. I am currently working on Menu 1 but struggling to figure out how to make the drop-down menus appear on the right side.

<link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css' />

<div class="nav">
  <ul class="menu" id="menu">
    <li> <a href="https://probapro2.blogspot.com/">home</a> </li>
    <li class=""> <a class="drop-ctg" href="#">category</a>
      <ul style="overflow: hidden; display: block; height: 0px; z-index: 1072; opacity: 0;">
        <li> <a href="#">Category 1</a> </li>
        <li> <a href="#">Category 2</a> </li>
        <li> <a href="#">Category 3</a> </li>
        <li> <a href="#">Category 4</a> </li>
      </ul>
    </li>
    <li class="">
      <a href="#">Menu 1</a>
      <ul style="overflow: hidden; display: block; height: 0px; z-index: 1069; opacity: 0;">
        <li class="dir">
          <a href="#">Menu 2</a>
          <ul style="overflow: hidden; display: block; height: 0px; z-index: 1070; opacity: 0;">
            <li style="margin-left:50px;"> <a href="#">Menu 3</a> </li>
            <li> <a href="#">Menu 3</a> </li>
            <li> <a href="#">Menu 3</a> </li>
          </ul>
        </li>
        <li class=""> <a href="#">Menu 2</a> </li>
        <li> <a href="#">Menu 2</a> </li>
        <li> <a href="#">Menu 2</a> </li>
      </ul>
    </li>
    <li> <a href="#">Menu 2</a> </li>
    <li> <a href="#">Menu 3</a> </li>
    <li> <a href="#">Menu 4</a> </li>
    <li> <a href="https://probapro2.blogspot.com/404">404 Error Page</a> </li>
  </ul>
</div>

Check out the JS fiddle for this code here.

I aim to create a droppable menu under Menu 1 with Menu 2 and further have Menu 3 displayed under the first instance of Menu 2.

htmlcss

Answer №1

If you want to achieve this effect with CSS, you can utilize the transform property along with the translate value. Here's an example:

*{
  margin:0;
  padding:0;
  outline:0; 
}
.nav {
  width:950px;
  height:auto;
  border-bottom:1px solid #eee;
  margin:10px auto 5px;
  display:inline-block;
}
.menu {
  width:auto;
  list-style:none;
  font:$pagenavifont;
  text-align:center;
  margin:0 auto;
}
.menu a {
  float:left;
  color:#999;
  text-decoration:none;
  text-transform:uppercase;
  width:auto;
  line-height:36px;
  padding:0 20px;
}

/* More CSS rules here */

.menu > li > ul {
  display: none;
}

.menu > li > ul > li > ul {
  transform: translate(100%,0);
  display: none;
  margin-top: -37px;
}

.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
  display: block;
}
<div class="nav">
  <ul class="menu">
    <li>
      <a href="https://example.com/">home</a>
    </li>
    
    <!-- More menu items -->
    
  </ul>
</div>

To make sure nested menus are displayed correctly, it's important to use the > selector in your CSS code when defining the display properties for these menus.

.menu > li > ul {
  display: none;
}

/* Adjust position for third-level menu */
.menu > li > ul > li > ul {
  transform: translate(100%,0);
  display: none;
  margin-top: -37px;
}

.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
  display: block;
}

Answer №2

When it comes to creating a dropdown menu, there are several key factors to consider. It seems like you are interested in developing a dropdown menu with nested submenus.

In order for each pop-out menu to function correctly, it must:

1) Determine the position of the parent element triggering the menu to ensure proper placement.

2) Calculate the appropriate location for the submenu based on the user's browser or screen position.

It is necessary to append the submenu to the right of the menu header that initiates its opening. Depending on any limitations you have, there are vanilla JS solutions available:

You can utilize techniques such as `position: relative;` and `position: fixed;` to properly position your nested menus next to their parent elements.

I would recommend carefully considering whether designing a custom nested dropdown menu aligns with your needs. There are well-established alternatives that have stood the test of time, offering flexibility in styling both menu headers and their child elements.

If you have any further inquiries, feel free to reach out!

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

Ways to emphasize the currently active tabs on a navigation bar

How can I highlight the active tabs and shift it when clicking on another link? $(function() { $('.nav ul li').on('click', function() { $(this).parent().find('li.active').removeClass('active'); $(this).a ...

jqueryhtmlcss

Array of radio buttons submitted via form

I am currently working on a PHP exam form where each option has a corresponding radio button to mark if it is correct. I need to store this information in a database. For each option, if the radio button is checked, it sends a post value of 'Yes&apos ...

phphtmlmysql

What is the best way to declare a minimum and maximum date in HTML as the current date?

I have a question regarding setting the min/max date for a date input in my Angular 6 project. How can I ensure that only dates up to the current date are enabled? So far, I have attempted to initialize a new Date object in the ngOnInit function and set t ...

htmlangulartypescript

eliminate whitespace characters within a string

Here is a question that suggests an easy way to remove space characters in a string using R. However, I encountered an issue when trying to remove a space between two numbers (e.g. 11 846.4) while working with the following table: require(XML) require(RCur ...

htmlrregexlinuxstring

Is it possible to turn off GPU rasterization for a particular SVG element in Google Chrome?

There is a peculiar issue with the SVG graphic displayed on my webpage. On some computers, the complex linearGradient filling a Rect does not display all the Stops correctly, while on other computers it appears fine. I discovered that if I disable "GPU ra ...

htmlcssgoogle-chromesvg

The toggle button appears to be lacking in CSS styling

I'm trying to create a dropdown button using Bootstrap and ng-bootstrap in my Angular project. Here's the HTML I've written: <div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="dropdownBasic1" n ...

cssangulartwitter-bootstrap-3angular6ng-bootstrap

HTML5 Boilerplate and optimizing the critical rendering path by deferring scripts and styles

Previously, I constructed my website layouts using the HTML5 Boilerplate method: incorporating styles and Modernizr in the head section, jQuery (either from Google CDN or as a hosted file) along with scripts just before the closing body tag. This is an exa ...

javascriptjquerycssperformancedeferred-rendering

What could be causing some videos not to load on a Chrome page?

Make sure to click on the link using a webkit browser. Upon loading, you should see a 4x4 grid of videos, but in Chrome, only 1-3 videos tend to load. Interestingly, it works perfectly fine on Safari. Why is this discrepancy happening even though they a ...

htmlvideo

The width specified for the table is not being applied

I've been struggling to adjust the width of my table in order to display data from a database. I've tried using inline width, !important tag, id, and class but none have worked. Interestingly, when I apply a fixed width without dynamic data, it w ...

htmlcss

Validation for a datepicker embedded within a table

I'm facing a challenge and need some assistance. I want to validate if the "FROM (DATE)" is greater than the "TO (DATE)" without disabling the date selection, but instead prompting the user if the condition is not met. Any insights or solutions would ...

javascriptjqueryhtmljquery-ui

Make the HTML element expand to the remaining height of the viewport

Need help with creating a section that automatically fills the remaining viewport height below the navigation bar. The section includes a centered div and background image, along with a button at the bottom for scrolling down by one full viewport height. H ...

cssviewport

Trouble arises when trying to use add event listener on dynamically generated elements through (*ngFor)

Expanding the Accordion View Issue Whenever the section button is clicked, the event listener userSelection[i].addEventListener changes the id to 'open', thus expanding the accordion. This functionality works without any issues when not using t ...

htmlangulartypescript

A completely css-based interpretation of google images

I am in the process of trying to recreate the layout found in Google Photos and stumbled upon this intriguing page https://github.com/xieranmaya/blog/issues/6 . I am particularly interested in the final result of the project, which can be viewed here: . U ...

htmlcssflexbox

Tips for personalizing react-show-more text length with Material-UI Icons

In my SharePoint Framework webpart using React, I am currently utilizing the show more text controller. However, I am interested in replacing the "Show More" and "Show Less" string links with the ExpandMore and ExpandLess Material UI icons. Is there a way ...

javascripthtmlcssreactjsmaterial-ui

Guide to vertical centering of inline elements within an inline-block using HTML and CSS

Despite reading numerous resources and articles on vertical alignment/centering in HTML/CSS, I still can't seem to get my specific case working as expected. If you have a moment, please take a look at http://jsfiddle.net/pf29r/3/ <div class="oute ...

htmlcss

Text area with a set height and expandable max-height - scrollable overflow

http://codepen.io/africanmatt/pen/IcGpa .text { max-height: 0; overflow-y: auto; transition: all .45s ease-in-out; } .text-active { max-height: 50%; } I am looking for a way to resize the .text component's max-height so that it adjusts prop ...

jquerycssheightflexbox

Tips for creating a dynamic menu with animated effects

Check out my fiddle here: http://jsfiddle.net/k3AHM/23/ $(document).scroll(function () { var y = $(this).scrollTop(); if (y > 110) { $('.menu-container').addClass( "fix-menu" ).animate('top', '-3px&a ...

javascriptjquerycss

Triangles positioned on the edges of a division element

I am attempting to create a DIV with angled corners, as depicted in the image below: https://i.sstatic.net/1a9LY.png So far, I have successfully implemented the top right corner using a tutorial. Here is the code snippet that accomplishes this: .lifeatb ...

css

I would like to request information regarding PHP

I am attempting to retrieve information from a PHP file and insert HTML code into the <div id="1"..., but there are no errors showing and nothing is being inserted into the div. Could the issue be with the AJAX code or is it a problem within the HTML st ...

javascriptphphtml

Ways to rearrange items in the navigation bar?

I am working with a Bootstrap template and I am trying to adjust the layout to be right-to-left (RTL). Currently, when I set the site title to RTL in the navbar, the buttons in the navbar also switch to RTL alignment. This is not the desired layout I want. ...

javascripthtmlcssfrontendbootstrap-5