Menu design with child element creatively integrated into parent element

Question

Menu design with child element creatively integrated into parent element

For my mobile project, I am working on creating a window blind effect menu. The process is quite simple:

Clicking on the menu icon moves the bar to the top while the menu drops down
Upon selecting an item, the menu smoothly "rolls" up in a window blind style, revealing the content in a similar manner

Here are the sections of CSS that I believe may be causing the issue:

#menu_wrapper ul {
display: none;
top: 100px;
right: 0;
bottom: auto;
left: auto;
position: absolute;
height: auto;
width: 100vw;
margin: 0;
padding: 1em;
color: #f5f5f5;
font-size: 2.5rem;
background-color: rgba(0, 0, 0, 0.8); }

#menu_wrapper ul a {
color: #f5f5f5; }

#menu_wrapper ul a:hover {
color: #00a8b0;
text-decoration: none; }

#menu_wrapper address {
margin-top: 1.5rem;
font-size: 1.5rem; }


#menu_wrapper .item-content {
display: none;
top: 50%;
right: 0;
bottom: auto;
left: auto;
position: absolute;
height: auto;
width: 100vw;
margin: 0;
padding: 1em;
z-index: 3; }

The challenge I am facing is that the "item-content" remains within the parent "menu_wrapper". This could be due to the absolute positioning of "menu_wrapper," but I am struggling to resolve these specific cases. It may also involve my jQuery code, though I am uncertain (any suggestions are appreciated)!

Here is a link to a jsFiddle for you to examine: http://jsfiddle.net/smpte11/5s6qxntt/

Thank you.

EDIT: I want to clarify the effect I aim to achieve. Upon clicking the menu, it drops down, and when closed, it rises until it disappears in a window blind manner. Additionally, clicking on a menu item causes the menu to roll up and disappear (similar to closing it), with the content appearing below. Naturally, the same effect occurs when navigating back to the previous level.

javascript jquery html css

Answer 1

Answer №1

It's possible that this may not be exactly what you're aiming for - I've made some adjustments to your Fiddle with the following modifications:

CSS:

 #menu_wrapper .item-content {
   position:relative;
 }

Now, each submenu is positioned next to the submenu headline.

jQuery:

function showPageContentPhone() {
 menu.on('click', 'li:not(:last-child) a', function () {
    console.log("click");
    var that = $(this);
    that.next('div').slideToggle();

  });
}

Previously, the main navigation would slide up every time a submenu item was clicked. Now, the submenus function as intended (but the previous effect may have been intentional).

Answer 2

It's possible that this may not be exactly what you're aiming for - I've made some adjustments to your Fiddle with the following modifications:

CSS:

 #menu_wrapper .item-content {
   position:relative;
 }

Now, each submenu is positioned next to the submenu headline.

jQuery:

function showPageContentPhone() {
 menu.on('click', 'li:not(:last-child) a', function () {
    console.log("click");
    var that = $(this);
    that.next('div').slideToggle();

  });
}

Previously, the main navigation would slide up every time a submenu item was clicked. Now, the submenus function as intended (but the previous effect may have been intentional).

Menu design with child element creatively integrated into parent element

Answer №1

Similar questions

employing variable in front of json notation

JavaScript - Verify if all properties belonging to an object are set to true

Ways to determine the total amount of days in a given month

Numerous social media sharing buttons conveniently located on a single webpage

The auto search feature seems to be malfunctioning after clicking the button

Solving the Dilemma of Ordering Table Rows by Value in JavaScript

unrestricted motion through the utilization of css3 transitions and translations

Are you wondering about the correct way to install eslint-config-airbnb without encountering any "UNMET PEER DEPENDENCY"

Creating a Custom Hot Module Replacement Hook for Vue.js and Webpack

Top method for identifying genuine users and preventing bots

Adjust the background to scroll to the bottom of the image first and then change it to be fixed

Guide on decrypting a file encrypted with C# using Node JS

Using Google Apps Script to retrieve post data from a web application through the `doPost` method

Issues with error handling in ExpressJS arise frequently

What is the best way to loop through an array of documents returned by Mongoose using Mongoose?

Iterating through a JSON object and an array

What is the best way to manage the appearance of multiple elements in React simultaneously?

What could be causing XMLHttpRequest to encounter issues with the readystate and status states while running on localhost

Is there a way to conceal a div element if the user is not logged in?

Fade out all the other images using jQuery