Responsive height typographic menu

Developer
Benjamin Réthoré
Size
2,549 Kb
Views
8,096
  1. Responsive height typographic menu Previews
  2. Responsive height typographic menu HTML Codes
  3. Responsive height typographic menu CSS Codes
  4. Responsive height typographic menu JS Codes

How do I make an responsive height typographic menu?

No matter how many items are in it, this menu won't overflow from viewport height. Click on the button to add more items.. What is a responsive height typographic menu? How do you make a responsive height typographic menu? This script and codes were developed by Benjamin Réthoré on 05 January 2023, Thursday.

Responsive height typographic menu Previews
IQ Test

Responsive height typographic menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive height typographic menu</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul id="list"> <li><a href="#" title="">Home</a></li> <li><a href="#" title="">Categories</a></li> <li><a href="#" title="">Services</a></li> <li><a href="#" title="">Contact</a></li> <li><a href="#" title="">About</a></li> </ul>
</nav>
<button id="addItem">+</button> <script src="js/index.js"></script>
</body>
</html>

Responsive height typographic menu - Script Codes CSS Codes

*, *:before, *:after { /* Brutal Reset, don't do this at home */ margin: 0; padding: 0; box-sizing: border-box;
}
html { font-size: 16px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700;
}
nav ul { font-size: 10vh; /* (100 / Nb items / 2)*/ line-height: 2; /* double to space items out */ text-align: center;
}
nav a { display: block; text-decoration: none; color: #00f; background-color: transparent; transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
}
nav a:hover { color: #fff; background-color: #00f;
}
nav ul li:not(:first-child){ margin-bottom: -1px /* Use it only if you want borders below items */
}
nav ul li:not(:last-child){ /* Apply a border-bottom to each item but the last */ border-bottom: 1px solid #eee;
}
/*
DEMO ONLY
These are styles for the + button
*/
button { position: fixed; bottom: 1rem; right: 1rem; background: #F00; border: 0; width: 4rem; height: 4rem; border-radius: 50%; color: white; font-size: 1.4rem; line-height: 1; box-shadow: 2px 2px 8px rgba(0,0,0,.24); cursor: pointer;
}
button:hover { opacity: .72; }
button:focus,
button:active { opacity: .48; outline: 0; }

Responsive height typographic menu - Script Codes JS Codes

const button = document.querySelector('button');
const target = document.querySelector('nav ul');
const addItem = function() { target.innerHTML += '<li><a href="#" title="">New item</a></li>'; // Refresh styles let nbItems = [...target.querySelectorAll('li')].length; target.style.fontSize = `${100 / nbItems / 2}vh`;
};
button.addEventListener('click', addItem);
Responsive height typographic menu - Script Codes
Responsive height typographic menu - Script Codes
Home Page Home
Developer Benjamin Réthoré
Username bnthor
Uploaded January 05, 2023
Rating 3
Size 2,549 Kb
Views 8,096
Do you need developer help for Responsive height typographic menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Benjamin Réthoré (bnthor) Script Codes
Name
Fun form with currentColor
CSS Grid gallery
Sample scss map
Simple tooltips
Cookie policy popunder
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!