JM Nav 1st draft

Size
2,633 Kb
Views
20,240

How do I make an jm nav 1st draft?

An initial attempt to create a global nav option for the JM rebuild, using flexbox but with an elegant fallback.. What is a jm nav 1st draft? How do you make a jm nav 1st draft? This script and codes were developed by Jonathan Garner on 13 August 2022, Saturday.

JM Nav 1st draft Previews

JM Nav 1st draft - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JM Nav 1st draft</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="nav">	<ul class="primary-nav"> <li class="primary-nav__section"><a class="primary-nav__title" href="">Projects</a></li> <ul class="primary-nav__children"> <li class="primary-nav_child"><a href="">Tableware</a></li> <li class="primary-nav_child"><a href="">Kitchen</a></li> <li class="primary-nav_child"><a href="">Chairs</a></li> <li class="primary-nav_child"><a href="">Sofas</a></li> <li class="primary-nav_child"><a href="">Tables</a></li> <li class="primary-nav_child"><a href="">Storage</a></li> <li class="primary-nav_child"><a href="">Lighting</a></li> <li class="primary-nav_child"><a href="">Office</a></li> <li class="primary-nav_child"><a href="">Electricals</a></li> <li class="primary-nav_child"><a href="">Urban</a></li> <li class="primary-nav_child"><a href="">Architectural</a></li> <li class="primary-nav_child"><a href="">Accessories</a></li> <li class="primary-nav_child"><a href="">Editions</a></li> </ul> <li class="primary-nav__section"><a class="primary-nav__title" href="">Exhibitions</a></li> <ul class="primary-nav__children"> <li class="primary-nav_child"><a href="">2000-</a></li> <li class="primary-nav_child"><a href="">1990 - 1999</a></li> <li class="primary-nav_child"><a href="">1980 - 1989</a></li> </ul> <li class="primary-nav__section"><a class="primary-nav__title" href="">Publications</a></li> <ul class="primary-nav__children"> <li class="primary-nav_child"><a href="">Books</a></li> <li class="primary-nav_child"><a href="">Essays</a></li> <li class="primary-nav_child"><a href="">Articles</a></li> <li class="primary-nav_child"><a href="">Interviews</a></li> </ul> <li class="primary-nav__section"><a class="primary-nav__title" href="">About Us</a></li> <ul class="primary-nav__children"> <li class="primary-nav_child"><a href="">Office for Design</a></li> <li class="primary-nav_child"><a href="">Biography</a></li> <li class="primary-nav_child"><a href="">Contact Us</a></li> <li class="primary-nav_child"><a href="">Credits</a></li> <li class="primary-nav_child"><a href="">Links</a></li> </ul> </ul>
</nav><!--end .nav-->
</body>
</html>

JM Nav 1st draft - Script Codes CSS Codes

body { font-family: verdana;
}
nav ul { list-style-type: none; padding: 0; margin: 0;
}
nav a { text-decoration: none; color: black;
}
nav a:hover { text-decoration: underline;
}
.primary-nav__section { padding-left: 1em; border-bottom: solid 1px #9d9282; padding-bottom: 0.5em;
}
.primary-nav__section a { color: #9d9282;
}
.primary-nav__children { padding: 1em; margin-bottom: 1em; /* Flexbox enhancement */ display: flex; flex-wrap: wrap;
}
.primary-nav_child { padding: 0 0 0.75em 0; width: 150px;
}
@media (min-width: 300px) { .primary-nav_child { display: inline-block; width: 45%; /* Flexbox enhancement */ display: flex; flex-wrap: wrap; width: 150px; }
}
@media (min-width: 600px) { .primary-nav_child { display: inline-block; width: 30%; /* Flexbox enhancement */ display: flex; flex-wrap: wrap; width: 150px; }
}
@media (min-width: 900px) { .primary-nav_child { display: inline-block; width: 23%; /* Flexbox enhancement */ display: flex; flex-wrap: wrap; width: 150px; }
}
JM Nav 1st draft - Script Codes
JM Nav 1st draft - Script Codes
Home Page Home
Developer Jonathan Garner
Username jonathangarner
Uploaded August 13, 2022
Rating 3
Size 2,633 Kb
Views 20,240
Do you need developer help for JM Nav 1st draft?

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!

Jonathan Garner (jonathangarner) Script Codes
Create amazing sales emails 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!