CSS Navigation Menu

Developer
Mark Peck
Size
1,841 Kb
Views
18,216
  1. CSS Navigation Menu Previews
  2. CSS Navigation Menu HTML Codes
  3. CSS Navigation Menu CSS Codes

How do I make an css navigation menu?

What is a css navigation menu? How do you make a css navigation menu? This script and codes were developed by Mark Peck on 13 October 2022, Thursday.

CSS Navigation Menu Previews
IQ Test

CSS Navigation Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Navigation Menu</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> <div class="container"> <nav> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Contact</a></li> </nav>
</div>
</body>
</html>

CSS Navigation Menu - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100);
html { font-family: 'Roboto', sans-serif; font-weight: 100; background: #f25916;
}
.container { width: 960px; margin: 50px auto;
}
nav { list-style: none; position: relative;
}
nav li { float: left;
}
nav li a { position: relative; padding: 18px 24px; color: rgba(255, 255, 255, 0.5); font-size: 14px; text-transform: uppercase; text-decoration: none; background: #374140; border-right: 1px solid #2A2C2B; border-bottom: 10px solid #2A2C2B; transition: all 0.2s ease;
}
nav li:first-child a { border-radius: 4px 0 0 0;
}
nav li:last-child a { border-radius: 0 4px 0 0; border-right: 0;
}
nav li a:hover { color: rgba(255, 255, 255, 0.9); border-bottom: 15px solid #2A2C2B; top: -5px;
}
nav li a:active { color: rgba(255, 255, 255, 0.2); border-bottom: 0px solid #2A2C2B; top: 10px;
}
CSS Navigation Menu - Script Codes
CSS Navigation Menu - Script Codes
Home Page Home
Developer Mark Peck
Username doodlemarks
Uploaded October 13, 2022
Rating 4
Size 1,841 Kb
Views 18,216
Do you need developer help for CSS Navigation 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!

Mark Peck (doodlemarks) Script Codes
Name
3D Styled CSS Browser Mockup
Blockquote Auto Tweet Button
Bootstrap Styleguide
Refract Light Overlay
Colors
Automated Browser Mockup
Hexagons in CSS
JQuery UI Draggable Experiment
Simple Accurate Counter
Very Simple Slider
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!