Guidance for Modifying Fixed Position Menus

Looking for help to transform a simple stick nav into a sliding menu that collapses into an icon like those found on website templates. I've been researching online but haven't found the right solution yet. Any suggestions would be appreciated!

Something similar to this quick Photoshop sketch: https://i.sstatic.net/iiTnk.jpg

You can view the code and test it out here: JSfiddle

Code snippet:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
  #menu {
    position: fixed;
    left: 0;
    top: 50%;
    width: 8em;
    margin: -2.5em 0 0 0;
    z-index: 5;
    background: white;
    color: #4E4E4E;
    font-weight: bold;
    font-size: large;
    text-align: left;
    border: #4e4e4e;
    border-left: none;
    padding: 0.5em 0.5em 0.5em 2.5em;
    box-shadow: 0 1px 3px black;

  }
  #menu li { margin: 0 }
  #menu a { color: inherit }

</style>
</head>

<body>
<ul id=menu>
<li><a href="#L384">Section 1</a>
<li><a href="#details">Section 2</a>
<li><a href="#FAQ">Section 3</a>
</ul>

</body>
</html>
javascriptcssmenushow-hide

Answer №1

The simplest method is to enhance your menu by incorporating a "square" using a pseudoelement :after that can be positioned as desired:

 #menu:after {
   content: '';
   position: absolute;
   top: 0;
   right: -40px;
   height: 40px;
   width: 40px;
   box-shadow: 0 1px 3px black;
   display: block;
   background-color: #fff;
 }
  #menu:before {
   content: '';
   position: absolute;
   z-index:1;
   top: 1px;
   right: -1px;
   height: 39px;
   width: 4px;
   display: block;
   background-color: #fff;
}

The before element acts as a white box to hide the shadow of the after pseudo-element, creating a seamless appearance with the menu.

To implement this, place the menu slightly outside the window to only reveal the after element and utilize an onclick event to toggle a class on the menu for showing or hiding it:

$('#menu').on('click', function(){
    $('#menu').toggleClass('visible');
});
#menu {
   position: fixed;
   left: -198px;
   top: 50%;
   width: 8em;
   margin: -2.5em 0 0 0;
   z-index: 5;
   background: white;
   color: #4E4E4E;
   font-weight: bold;
   font-size: large;
   text-align: left;
   border: #4e4e4e;
   border-left: none;
   padding: 0.5em 0.5em 0.5em 2.5em;
   box-shadow: 0 1px 3px black;
   transition: left 0.2s linear;
 }
 
 #menu li {
   margin: 0
 }
 
 #menu a {
   color: inherit
 }
 
 #menu:after {
   content: '';
   position: absolute;
   top: 0;
   right: -40px;
   height: 40px;
   width: 40px;
   box-shadow: 0 1px 3px black;
   display: block;
   background-color: #fff;
 }
  #menu:before {
   content: '';
   position: absolute;
   z-index:1;
   top: 1px;
   right: -1px;
   height: 39px;
   width: 4px;
   display: block;
   background-color: #fff;
 }
 .visible {
   left:0 !important;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id=menu>
  <li><a href="#L384">Section 1</a>
    <li><a href="#details">Section 2</a>
      <li><a href="#FAQ">Section 3</a>
</ul>

Check out the complete example on JSFIDDLE

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

Manage and preserve your node.js/express sessions with this offer

Currently, I am working on a web application that encounters an issue where every time fs.mkdir is called, all the current express sessions are deleted. This causes me to lose all session data and I need a solution to keep these sessions intact. I have att ...

javascriptnode.jsexpressredis

Auto-suggest dropdown menu with pre-populated options

I am looking to implement a feature where users can click on an icon and a dropdown menu will appear, allowing them to search through data. To better illustrate this concept, here is an image: Users will be able to input their quiz names in the first sect ...

javascriptjqueryhtmldrop-down-menujquery-select2

Exploring the depths of Rx.ReplaySubject: Techniques for delaying the `next()` event

Confused Mind: Either I'm mistaken, or the whiskey is starting to take effect. (I can't rule out the possibility that I'm just going crazy. Apologies for that.) Assumption: My assumption was that ReplaySubject would emit a single value eve ...

javascripttypescriptrxjstop-level-awaitreplaysubject

Creating distinct identifiers for CSS JQ models within a PHP loop

Can anyone assist me in assigning unique identifiers to each model created by the loop? I am currently looping through a custom post type to generate content based on existing posts. I would like to display full content in pop-up modals when "read more" i ...

javascriptphphtmljquerycss

Searching for values in nested arrays using lodash.find

Presented below is an array where I aim to employ lodash for item search: [ { "itemA": "apple", "itemB": [ { "itemC": "1", "itemD": "red apple" }, { "itemC": "2", "itemD": "green apple" }, ...

javascriptarraysnode.jslodash

Encountering obstacles with asynchronous requests while attempting to retrieve an Excel file using ajax

I am coding JavaScript for a SharePoint project, focusing on creating a function to retrieve data from an Excel document in a library. While I have successfully implemented the basic functionality, I am facing an issue with large file sizes causing the dat ...

javascriptjqueryajax

Can someone assist me with navigating through my SQL database?

Struggling with a script that searches multiple fields in the same table, I need it to return results even if one or three parameters are left blank. My attempts using PHP and MySql have been fruitless so far, which is why I am reaching out to the experts ...

javascriptphpjquerymysql

React.js router - struggles to clean up unsightly query parameters in the URL

I've been trying to eliminate the query string by following this solution: var { Router, Route, IndexRoute, IndexLink, Link } = ReactRouter; var createHashHistory = History.createHashHistory; var history = createHashHistory({queryKey: false} ...

javascriptreactjsreact-router

A guide to querying JSON data in a backend database with JavaScript

My backend JSON DB is hosted on http://localhost:3000/user and contains the following data: db.json { "user": [ { "id": 1, "name": "Stephen", "profile": "[Unsplash URL Placehol ...

javascriptjsonnpmjsondb

Bootstrap forms with checkboxes and lineup labels

Here is the HTML code that has been generated: <div class="form-group"> <label class="control-label col-md-2" for="IsWebSiteActive">Website Active</label> <div class="col-md-4"> ...

htmlcsstwitter-bootstrap

Issue with autoplay feature on Swiper carousel not functioning

I'm in the process of creating a charity website for an organization using a template I obtained from Themeforest (check it out here). Unfortunately, the swiper carousel isn't functioning as expected. Below are the snippets of code found within ...

javascriptjquerybootstrap-4carouselswiper.js

I am interested in modifying the color of the tick marks on the input[range] element

Seeking Slider Customization Help I am eager to learn how to create and personalize a slider using HTML. Although many resources offer guidance on customizing the slider itself, I have yet to come across any information on customizing the scale. For insta ...

htmlcssinput

Determine the number of items (within an array) that were created within the past few days, weeks, and months leading up to the 'current time'

Having an array filled with objects containing timestamps: Here is a glimpse of the data: const dataList = [ { _id: "602102db3acc4515d4b2f687", createdDt: "2021-02-08T09:22:35.000Z", }, { _id: "6021024da706a260d89 ...

javascriptnode.jsreactjsmomentjslodash

Developing an Angular template component integrated with Express JS backend

I'm encountering an issue while attempting to load a template file from one of my folders in Angular. I have my JS files statically called with Express, however, the template files are not loading. I have tried placing them in the views folder along w ...

javascriptangularjsnode.jstemplatesexpress

What is the simplest method for comparing transaction amounts?

I'm in the process of integrating PayPal into my website using their REST API. My goal is to allow users to input the amount they want to deposit. While I can obtain the total during payment creation, I'm unsure how to smoothly pass it to the exe ...

javascriptnode.jsexpresspaypal

Send properties to the makeStyles function and apply them in the CSS shorthand property of Material UI

When working with a button component, I pass props to customize its appearance: const StoreButton = ({ storeColor }) => { const borderBottom = `solid 3px ${storeColor}`; const classes = useStyles({ borderBottom }); return ( <Button varian ...

javascriptcssreactjsmaterial-uijss

When using the Column width property in React Material UI, it may not automatically expand

I've been playing around with React Material UI Tables and I'm having trouble making the columns auto-expand without wrapping. I tried setting the 'width: auto' property in the <Table size="small" style={{ width: auto}}> ...

cssreactjsmaterial-uimaterial-design

Setting a new state versus modifying the existing state by using setState have distinct nuances

I’m currently struggling with updating the value of a specific key in the state of my component. The state is structured as follows: this.state = { stateValue1: false, stateValue2: false, stateValue3: false }; To update the ...

javascriptreactjsreact-nativeecmascript-6

Refreshing Slickgrid: Updating grid data with data fetched from an AJAX source

Within the app I am developing, there exists a data grid alongside select boxes that allow users to set filters. Upon selection of these filters, an AJAX call is made to retrieve a new array of data from the server. The challenge I currently face is wipin ...

javascriptjqueryajaxslickgrid

Node.js: Breaking the Rules with an Illegal Break Statement

Struggling to generate a unique ID in Node.js and MongoDB, using a while loop that checks existing IDs in MongoDB until a unique value is found. If the ID is already taken, a number is added to the end until Mongo returns no results. Everything seems to b ...

javascriptnode.jsmongodbasynchronouswhile-loop