Content Aware Navigation
How do I make an content aware navigation?
This nav bar layout changes from a distributed table-cell layout to a basic inline-block layout if there are more than 6 or more list items therein.. What is a content aware navigation? How do you make a content aware navigation? This script and codes were developed by Heydon on 27 August 2022, Saturday.
Content Aware Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Content Aware Navigation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav role="navigation"> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">blog</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">a link with a lot of text</a></li> <!-- add or remove items --> </ul>
</nav>
<nav role="navigation"> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">blog</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">a link with a lot of text</a></li> <li><a href="#">shop</a></li> <li><a href="#">endorsements</a></li> <!-- add or remove items --> </ul>
</nav>
</body>
</html>
Content Aware Navigation - Script Codes CSS Codes
/* table layout if there are less than 6 items */
nav ul { display: table; table-layout: fixed; width: 100%; text-align: center; background: #333;
}
nav li { list-style: none; display: table-cell; vertical-align: middle; background: #333;
}
nav li + li { border-left: 2px solid #000;
}
nav a { text-decoration: none; color: #fff; display: block; padding: 0.75em 1em; font-size: 1.25em;
}
nav a:hover, nav a:focus { text-decoration: underline;
}
/* inline-block (wrapping) layout if there are 6 or more items */
nav li:nth-last-child(n+6),
nav li:nth-last-child(n+6) ~ * { display: inline-block; border: 0;
}
nav li:nth-last-child(n+6) a,
nav li:nth-last-child(n+6) ~ * a { display: inline-block; border: 0;
}
/* boring stuff */
body { font-size: 20px; font-family: sans-serif;
}
nav { margin-top: 3em;
}
Developer | Heydon |
Username | heydon |
Uploaded | August 27, 2022 |
Rating | 4.5 |
Size | 1,950 Kb |
Views | 34,408 |
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!
Name | Size |
Hash change logging | 2,134 Kb |
Accessible, pretty radio controls | 2,112 Kb |
Theme color inverter with filter | 0 Kb |
Content Aware Navigation | 1,950 Kb |
Redesigned gender form field | 1,160 Kb |
CSS only, automated, and accessible external link icon | 1,678 Kb |
Bookish | 2,094 Kb |
Focus management of smooth scrolling | 2,506 Kb |
Invert custom properties | 2,026 Kb |
Just add javascript | 2,010 Kb |
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!
Name | Username | Size |
Out of the blue | Giaco | 2,537 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Table Exercise | Fresco | 9,585 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
Parallax.js | Zmeeey5 | 2,330 Kb |
Basic template | Tomcat | 1,675 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
Starfield using KineticJS | Asp | 3,512 Kb |
3D flipping card | Ssaakkaa | 2,238 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!