Content Aware Navigation

Developer
Heydon
Size
1,950 Kb
Views
34,408
  1. Content Aware Navigation Previews
  2. Content Aware Navigation HTML Codes
  3. Content Aware Navigation CSS Codes

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 Previews
IQ Test

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;
}
Content Aware Navigation - Script Codes
Content Aware Navigation - Script Codes
Home Page Home
Developer Heydon
Username heydon
Uploaded August 27, 2022
Rating 4.5
Size 1,950 Kb
Views 34,408
Do you need developer help for Content Aware Navigation?

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!

Heydon (heydon) Script Codes
Name
Pixelated Brain Animation
DIV wormhole
CSS only, automated, and accessible external link icon
Bookish
Just add javascript
Theme color inverter with filter
Current Page Test Case
Controlled chaos
Focus management of smooth scrolling
Ransom Note With Google Font Subsets
Create amazing video scripts 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!