Disappearing a menu list while zooming in on a page: The art of vanishing navigation

[QUESTION]

Is there a way to make the Menu List disappear when zooming in on a webpage?

For example:

<-- Normal Page [No Zoom] -->

[Logo] Profile Gallery Guestbook


<-- Zoom In 120% -->

[Logo] Profile Guestbook


<-- Zoom In 150% -->

[Logo] Guestbook


<-- Zoom In 200% -->

[Logo]

This is the CSS and div code I have for it:

#nav {list-style-type:none; margin:0px; position:static;}


#nav li a {display:inline-block; width:50; padding: 10 20 10 20; text-align:center;     text-decoration:none; float:left; color:#FFF;}


#nav li a:hover {background:#FFF; color:#000; border-top:3px solid #333;}

<ul id="nav">

<li ><a href="/">Profile</a></li>

<li ><a href="/">Gallery</a></li>

<li ><a href="/">Guestbook</a></li>

</ul>

When zooming in on the page, the menu should automatically disappear without a scrollbar.

To see an example, visit navigation menu.

javascriptjqueryhtmlcssajax

Answer №1

They are determining the width of the content and showing certain menu items by changing them to display: block using @media queries. For example:

@media screen and (min-width: 1300px) {
    .main-menu>li:nth-child(12) {
        display: block;
    }
}

Therefore, if the content width is less than 1300px, the specified menu item will remain hidden with display: none;

Answer №2

Ensure to utilize overflow:hidden;, establish a proper structure, and apply appropriate styling:

HTML:

<div class='nav'>
   <ul>
     <li><a href='#'>One</a></li>
     <li><a href='#'>Two</a></li>
     <li><a href='#'>Three</a></li>
     <li><a href='#'>Four</a></li>
     <li><a href='#'>Five</a></li>
     <li><a href='#'>Six</a></li>
   </ul>
</div>

CSS:

.nav{width:80%; height:50px; background:#e5e5e5; overflow:hidden;} // container for navigation with hidden overflow
.nav ul{margin:0; padding:0; width:100%; overflow:hidden;} // list parent with hidden overflow as well
.nav li{display:inline-block; padding:0 20px; height:50px; line-height:50px;}

There are various methods to achieve this effect but I prefer this concise approach.

View demonstration here

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

Form an array from a Jquery Mobile List

In my jQuery Mobile project, I have a list with unique id numbers and search query numbers. Here's an example: "<li><a href='./page.html?id=2' data-transition='slide' id=1>Name</a></li>"; and "<li> ...

jqueryjquery-mobilesoundmanager2

Converting Text into HTML using Node.js

Currently, I am utilizing nodemailer to send emails from my node server. The content for these emails is fetched from a MSSQL SQL server and is formatted in plain text format, including newline characters. However, when sending the email using nodemailer, ...

htmlnodemailertext-to-html

Attempting to display a base-64 encoded image in a Next.js application

After following this method, I successfully uploaded my image as a string: const [image, setImage] = useState(""); //------------------^^^^^^^^^^^^^^^^------------------------- const handleImage = (e) => { ...

javascriptmongodbimagenext.js

Dealing with Laravel and AJAX - Issue with Loading DIV

I find myself in a perplexing situation. Despite not encountering any errors in my apache logs or browser (chrome), I am faced with an issue that has left me baffled. On a specific page (localhost/admin/networks), I can click on an item from a database-ge ...

javascriptajaxlaravel-4

The event for 'deviceready' in Cordova is not getting triggered when placed inside the angular .run block

Recently, I've been facing difficulties in getting 'deviceready' to register within AngularJS. It was functioning properly earlier, so I'm puzzled about what might have altered. If I trigger 'deviceready' from a global addEve ...

javascriptangularjscordova

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

javascriptjqueryhtmlcsscakephp

When the navbar is expanded, a right-aligned image is visible; however, it becomes invisible when the

My website has a navigation bar with two logos - one in the left corner (the coat of arms) and one in the right corner (the scout lily), along with text links in between. The coat of arms uses the "navbar-brand" class. To see how it looks, click here: htt ...

htmlcsstwitter-bootstrapbootstrap-5

How does the search feature in Gmail function when trying to locate a previous email?

Hello all, I am new to the world of asp.net and I am currently working on developing a web application using asp.net and jQuery. My goal is to create a search functionality where users can search for records using keywords. The search function is already ...

jqueryasp.netasp.net-ajax

Utilizing opera and applying an inset box-shadow when active

Check out this link When viewing in Chrome, the button looks great. However, when switching to Opera, the box-shadow is not visible when the button is pressed (:active). This issue only occurs when the box-shadow on the :active state is set to inset, like ...

cssopera

Arrange the keys of a map in ascending order, prioritizing special characters and their precedence

JavaScript ES6 Map Example: const map = new Map(); map.set('first', ['1', '2']); map.set('second', ['abc', 'def']); map.set('_third', []); map.set(')(*', []); map.set('he ...

javascriptobject

Creating clones of <li> elements using JQuery and appending them to the end of a <ul> list

I have a regular ul li list and I am looking to add an additional li based on the first one in the list. Here is the HTML: <div id="gallery"> <ul> <li>Point Nr 1<p>lol</p></li> <li>Point Nr 2</li> <li> ...

javascriptjquerycopyduplicateshtml-lists

Looking for an improved, tidier, or more efficient alternative to PHP Random Text?

Is there a more efficient way to generate random text other than using the random_text function in PHP? I'm interested in a method that is quick to render and light on server resources for faster page loading. Should I consider alternatives like Javas ...

phpjavascriptjqueryssi

I would like to take the first two letters of the first and last name from the text box and display them somewhere on the page

Can anyone help me with creating a code that will display the first two letters of a person's first name followed by their last name in a text box? For example, if someone enters "Salman Shaikh," it should appear somewhere on my page as "SASH." I woul ...

phpjavascriptjqueryhtmlcss

Choose past dates and display the current date using the Bootstrap datetimepicker

I've encountered a challenge in displaying the current day while still allowing selection of past dates. When I set the start date as today's date, I am unable to choose past dates. However, if I remove the parameter startDate: new Date(), I can ...

jquerybootstrap-datetimepicker

Tips for Emphasizing a Row in a Table Using a Specific Value

Currently, I am engaged in creating an educational YouTube tutorial that delves into Google App Script and Google Sheets. I have been attempting various methods to highlight a row containing the word "ABSENT", but all my endeavors have proven to be unsucc ...

javascriptgoogle-apps-scriptgoogle-sheets

Which architectural style is best to master for developing exceptional JavaScript software?

My familiarity with Model-View-Controller runs deep, having worked with it for years in server-side development using languages like PHP. Now, I find myself diving into JavaScript and embarking on a large project that utilizes SVG, Canvas, and other moder ...

javascripthtml

Is there a way to eliminate spaces from a string using react-native?

As a user of react-native, I've encountered an issue with inconsistent line breaks when inputting long strings on the screen. For example: I aim to achieve consistent string wrapping as shown in the image below: Here is my code. How can I address t ...

javascriptnode.jsreactjsreact-nativestyled-components

Issue with Vue/Nuxt 3: Unable to modify properties of null when setting 'textContent'

I am currently facing an issue with a function that is designed to switch words every few seconds. The functionality itself is working fine, but I keep encountering the following error intermittently in the VSC console: TypeError: Cannot set properties o ...

javascriptvue.jsnuxt.jsvuejs3nuxtjs3

How do I ensure my object is fully constructed before sending it in the response using NodeJS Express?

Currently, I am in the process of constructing a result_arr made up of location objects to be sent as a response. However, my dilemma lies in figuring out how to send the response only after the entire array has been fully constructed. As it stands, the re ...

javascriptnode.jsexpress

Perform mathematical operations on numbers using jQuery based on their index

Trying to manipulate numbers in the HTML with this less-than-ideal code. The display starts like this at the beginning: 1/ 6 And ends up like this at the final index: 6/ 6 Utilizing this in conjunction with pageslide.js as a workaround for the default ...

jqueryhtml