Why CSS Architecture Matters Example 2

Developer
Derick Ruiz
Size
3,103 Kb
Views
8,096
  1. Why CSS Architecture Matters Example 2 Previews
  2. Why CSS Architecture Matters Example 2 HTML Codes
  3. Why CSS Architecture Matters Example 2 CSS Codes
  4. Why CSS Architecture Matters Example 2 JS Codes

How do I make an why css architecture matters example 2?

What is a why css architecture matters example 2? How do you make a why css architecture matters example 2? This script and codes were developed by Derick Ruiz on 27 December 2022, Tuesday.

Why CSS Architecture Matters Example 2 Previews
IQ Test

Why CSS Architecture Matters Example 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Why CSS Architecture Matters Example 2</title> <link href='https://fonts.googleapis.com/css?family=Fira+Sans:300' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="nav" role="navigation"> <li class="active"><a href="#">home</a></li> <li aria-haspopup="true"> <a href="#">products</a> <!-- Markup for the menu starts here --> <ul class="menu" role="menu" aria-hidden="true"> <li role="menuitem"> <a href="#">Shirts</a> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/260969/shirt.png"> </li> <li role="menuitem"> <a href="#">Sweaters</a> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/260969/sweater.png"> </li> <li role="menuitem"> <a href="#">Shorts</a> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/260969/shorts.png"> </li> <li role="menuitem"> <a href="#">+5 categories</a> </li> </ul> </li> <li><a href="#">about</a></li> <li><a href="#">search</a></li>
</ul> <script src="js/index.js"></script>
</body>
</html>

Why CSS Architecture Matters Example 2 - Script Codes CSS Codes

/* Have to add ul.nav to the selector because `ul.menu li` isn't specific enough and is being overriden by `ul.nav li` down below. */
ul.nav ul.menu li { overflow: hidden; clear: both; float: none; /* Have to override the float from the previously defined `.nav li` selector */ border-right: none; /* Also have to remove the border. */
}
ul.nav ul.menu li:hover::before { /* Have to remove the hover behavior of adding the bottom border bar from `.nav li` as well. */ display: none;
}
/* Targeting the hover using nth-child. What if the client wants it positioned differently? */
ul.nav li:nth-child(2):hover ul.menu { display: block;
}
/* Dangerous terroitory here to target the `+5 categories link` */
ul.menu li:last-child :link { float: none; text-align: center; text-decoration: underline; text-transform: lowercase;
}
/* Once again have to put in the parent selector to override the specificity of a previous css selector. */
ul.nav ul.menu li :link { font-size: 1rem; float: left; padding-right: 1rem; padding-left: 1rem;
}
ul.menu li:hover { background-color: rgba(18, 48, 85, 0.3);
}
.menu { display: none; min-width: 200px; padding: 0; position: absolute; left: -2rem; top: 6rem; background-color: #F8F8F8; border-radius: 4px; border: 1px solid #152941; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}
ul.menu::before,
ul.menu::after { content: " "; position: absolute; top: -0.6rem; left: 50%; -webkit-transform: translateX(-50%) translateZ(0); transform: translateX(-50%) translateZ(0); width: 0;	height: 0;	border-left: 0.618rem solid transparent;	border-right: 0.618rem solid transparent;	border-bottom: 0.618rem solid #000;
}
ul.menu:after { top: -0.55rem; border-bottom: 0.618rem solid #F8F8F8;
}
ul.menu li img { width: 2.5rem; height: auto; float: right; padding: 0.4rem; margin-top: 0.2rem;
}
ul.nav { margin: 0; padding: 0; background-color: #F8F8F8; height: 2.6179rem; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}
ul.nav li :link { display: block; color: #1D395B; padding: 0.618rem; padding-left: 1rem; padding-right: 1rem;
}
ul.nav li { display: block; float: left; position: relative; height: 100%; font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 300; text-transform: capitalize; border-right: 1px solid #152941;
}
/* The following CSS isn't important to the example. */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale;
}
:link { text-decoration: none;
}
ul.nav li:hover::before,
ul.nav li.active::before { content: ""; position: absolute; bottom: 0; right: 50%; -webkit-transform: translateX(50%) translateZ(0); transform: translate3d(50%) translateZ(0); display: block; height: 0.236rem; width: 80%; background-color: rgba(18, 48, 85, 0.3);
}
ul.nav li.active::before,
ul.nav li.active:hover::before { background-color: #123055;
}
@media only screen and (min-width: 500px) { ul.nav { height: 4.2358rem; } ul.nav li { font-size: 1.618rem; } ul.nav li :link { padding: 1rem; padding-left: 1.618rem; padding-right: 1.618rem; }
}

Why CSS Architecture Matters Example 2 - Script Codes JS Codes

/* Use some javascript to update the aria-hidden status when the user is tabbing through. */
Why CSS Architecture Matters Example 2 - Script Codes
Why CSS Architecture Matters Example 2 - Script Codes
Home Page Home
Developer Derick Ruiz
Username derickruiz
Uploaded December 27, 2022
Rating 3
Size 3,103 Kb
Views 8,096
Do you need developer help for Why CSS Architecture Matters Example 2?

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!

Derick Ruiz (derickruiz) Script Codes
Name
Hungry Carousel
Rrremark.com Overlay Highlighter
Why CSS Architecture Matters Example 3
Patterns Screen
Navigation
Dating App
Credit card form - Daily UI 002
Sign up form - DailyUI 001
Rrremark.com notification
Create amazing web content 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!