Menu Overlay (jQuery/CSS)

I am in the process of developing a website that is optimized for both mobile and desktop devices. I am currently brainstorming ideas for the main navigation, which I envision as an overlay that slides down similar to .

However, I am struggling to create this overlay effect. So far, all I have achieved is having a section of the page slide down when the menu button is clicked, which is not quite what I had in mind.

This is the syntax of the menu:

<div id="navContainer">  
    <div id="topNav">
    <div class="top">
    <div class="heading">
        <div id="logo">LOGO</div>
    </div>
    <a href="#" class="menu">MENU</a> 
</div>

        </div>


    </div>

<div class="drawer">
<nav>
  <ul class="nav nav-tabs nav-stacked">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</nav>
</div>

The functionality of the menu is similar to this example: http://jsfiddle.net/RFpDJ/1/, but I am looking for it to overlay the content rather than push it down.
Any suggestions or solutions?

jqueryhtmlcss

Answer №1

To take the menu out of its normal layout flow, you can easily use position: absolute;

.drawer {
    position: absolute;
    width: 100%;
}

http://jsfiddle.net/RFpDJ/12/

I have also placed the content outside of .drawer to prevent it from being pushed down with the menu. (Made some minor adjustments to other values as well, but they aren't crucial.)

Answer №2

You can check out my resolution for the problem.

I decided to switch the menu to absolute positioning (position:absolute;) and relocated the content div outside of the banner.

Answer №3

take a look at this: 

.drawer {
  position: absolute;
  width:100%;
  top:-100px;
}

.content{
 top:90px;
 position:absolute;
 width:100%;
 height:400px;
}

see it in action here: http://jsfiddle.net/RFpDJ/14/

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 submenu dropdown on the navigation bar appears once you hover over the parent bootstrap element

Hey there! I'm currently facing an issue where the submenu dropdown is displaying when its grandparent is hovered, rather than just its parent. Here's the code snippet: <nav class="navbar navbar-default"> <div class="container"> ...

jqueryhtmlcsstwitter-bootstrapnavbar

Using Bootstrap and CSS to style a div element and fill it

I'm struggling with a div that splits in two, where I've placed an image on the left side. However, the image doesn't seem to fill the entire space and there are empty spaces on the sides. I'm using bootstrap, but any CSS solution would ...

htmlcssbootstrap-4

Tips on detecting a collision between a cube mesh and the boundaries of a browser using ThreeJS

I'm a beginner in 3D games and ThreeJS. In the image above, my Mesh is located at the left boundary of the browser with a position of -1035 instead of 0. This leads me to question what exactly is the relationship between mesh.position.x in ThreeJS and ...

javascripthtmlthree.jswebgl

The ng-show and ng-hide directives are not working as expected, and there are no error

I'm currently working on a Todo App using AngularJS 1.x (version 1.6), but I'm having issues with ng-show and ng-hide functionality. The aim is to have a text box appear in the todo section when the edit button is clicked to modify existing todos ...

javascriptangularjshtml

The progress indicator fails to activate during the first step

As a beginner in coding, I wanted to incorporate a progress bar on my website. However, I encountered an issue where when I try to make step 1 "active", it's actually step 2 that becomes active, and the same pattern continues for subsequent steps. ...

htmlcsswebprogress-bar

Leveraging Angular and HTML to efficiently transfer the selected dropdown value to a TypeScript method upon the user's button click

I am experiencing difficulty accessing the .value and .id properties in {{selectItem}} in order to send them back to the typescript for an HTTP post at a later time. Although there are no specific errors, I have encountered exceptions and have tried search ...

htmlangulartypescriptcollectionsdata-binding

What is the best way to retrieve a table from an HTML page and convert it into a data frame using XML and Rcurl in R programming?

Can someone help me convert a table on the Forbes website into a data.frame? Click here to access the table ...

htmlrxmlrcurl

What is the best way to handle an array (or manually loop through ng-repeat)?

AngularJS Version: 1.3.15 Confession: While I have limited knowledge of AngularJS, I am required to utilize it due to its integration in the framework I am working with. I aim to make changes to some HTML/AngularJS code that currently appears as follows: ...

angularjshtml

customized webpage redirection based on visitor's IP address

I need assistance with redirecting the URL based on the visitor's IP address. The code I have seems to only direct visitors to AU, with all other conditions not working as expected. Any help would be greatly appreciated. Thank you! <script languag ...

jquery

Utilizing a StyledComponents theme within a Component

When creating a style called Link, the theme is contained inside of this.props. How can the theme be extracted from props and passed into the Link styled component? Error: ReferenceError - theme is not defined import React from 'react'; impo ...

javascriptcssreactjsstyled-components

What is the best way to display time in EJS?

Currently facing an issue with formatting a time retrieved from the database. The value is strictly a time and not associated with any date. I've attempted to use getHours and getMinutes in EJS, but they don't seem to be functioning as expected. ...

htmlnode.jsejs

Issues with Javascript functionality on aspdotnetstorefront site

Lately, I've been facing some challenges with my Javascript and jQuery codes when trying to implement them in the storefront. Despite attempting different methods to create a slider, none seem to work within the store environment - even though they fu ...

javascriptjqueryaspdotnetstorefront

Using JQuery to compare duplicate values within the same input name

I am dealing with several hidden input fields like the ones below: <input type="hidden" value="4531" name="product_id"> <input type="hidden" value="4532" name="product_id"> <input type="hidden" value="4533" name="product_id"> My goal is ...

javascriptjquery

Issue with dropdown list functionality in Internet Explorer not functioning correctly

I am experiencing an issue with my dropdown lists. When selecting an item from the first dropdown list, it should not be available in the second dropdown list. To achieve this functionality, I have implemented jQuery code like the following: $(document).r ...

javascriptjquery

Adding options to a dropdown menu dynamically while editing a form with the help of javascript

I have a dropdown like in below:- <form name="depositForm" action="<?php echo site_url('ajax_funds/deposit_funds'); ?>" id="depositForm" class="page-form-main form-horizontal " autocomplete="off" method="post"> <div class="form- ...

javascriptjquery

incorporating a timer into a JavaScript game

I am currently working on a memory card game where I want to include a stopwatch feature. I'm looking to display the time elapsed from when the user selects the first card until they win. However, I am struggling with keeping the stopwatch running smo ...

javascripthtml

Shifting an element to the right before revealing or concealing it with Jquery Show/Hide

$(document).ready(function(){ var speed = 700; var pause = 3500; function removeFirstElement(){ $('ul#newsfeed li:first').hide('slide', {direction: "up"}, speed, function() {addLastElement(thi ...

javascriptjqueryinternet-explorerjquery-uishow-hide

Customizing browser titles for various article pages on Joomla 3.2 for improved SEO performance

Is there a way to incorporate unique browser titles for various article pages? Additionally, I am seeking guidance on how to integrate distinct meta tags for different pages within a Joomla website... ...

htmljoomlatwitter-bootstrap-3joomla3.0

Using jQuery, organize tables by the value of their td class

, I am attempting to organize various td elements within one or more trs based on their respective classes. These are all housed in multiple table elements with the classname "hosts". Currently, my jQuery abilities are lackluster and I am struggling to sor ...

jqueryhtmlcss

Why isn't the page being redirected when attempting to use JavaScript with window.location and window.location.href?

Currently, I have implemented a login system on my website. The process involves triggering an ajax request to a designated PHP script upon the user clicking the submit button. This script is responsible for logging in the user and responding with the mess ...

javascriptphphtmlajaxhttp-redirect