CSS Full Width Content Menu

Developer
Saysora
Size
3,712 Kb
Views
26,312
  1. CSS Full Width Content Menu Previews
  2. CSS Full Width Content Menu HTML Codes
  3. CSS Full Width Content Menu CSS Codes
  4. CSS Full Width Content Menu JS Codes

How do I make an css full width content menu?

A full CSS driven Navigation Menu. The idea is to let the drop-down space be used for Description of the main Link Item then give links to other pages or info in the subnav area. Hope you enjoy.. What is a css full width content menu? How do you make a css full width content menu? This script and codes were developed by Saysora on 26 August 2022, Friday.

CSS Full Width Content Menu Previews
IQ Test

CSS Full Width Content Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Full Width Content Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Begin Navigation -->
<div id="navigation"> <!-- Used to align Menu to the middle set to 960px width --> <div class="putmiddle"> <nav id="navi"> <ul> <!-- Main Nav Items --> <li><a>Home</a></li> <li><a>About</a></li> <li class="triangle"><a>Connect</a> <!-- Sub Nav Items --> <ul> <li><h1>Connect</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt, velit sit amet blandit sollicitudin, nibh nisi blandit turpis, ac ultricies sem mauris vel sapien. Nulla a lacinia leo. Aenean et nulla cursus velit gravida tincidunt non a ipsum. Maecenas ligula elit, egestas quis molestie ut, iaculis et est.
</p></li> <li> <!-- Third Level Nav Items --> <ul> <li>Thing 1</li> <li>Thing 2</li> <li>Thing 3</li> <li>Thing 4</li> <li>Thing 1</li> <li>Thing 2</li> <li>Thing 3</li> <li>Thing 4</li> </ul> <!-- end Third Level Nav --> </li> </ul> </li> <!-- Close Second Level Nav --> <li class="triangle"><a>Media</a> <ul> <li><h1>Something Else</h1></li></ul></li> <li><a>Resources</a></li> <li><a>Contact</a></li> <li><a>Giving</a></li> </ul> <!-- end Main Nav Items --> </nav> <!-- Close Class PutMiddle --> </div>
</div> <!-- Close Navitation --> <script src="js/index.js"></script>
</body>
</html>

CSS Full Width Content Menu - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
body { font-family: "Helvetica";
}
/*=================	Navigation
=================*/
#navigation { margin-top: 40px; height: 40px; background: #222222;
}
#navi { width: 960px; max-width: 100%; margin: 0 auto;
}
#navi > ul { list-style: none; z-index: 10; font-weight: lighter; position: static;
}
#navi > ul .triangle:hover:after { position: absolute; content: ""; margin-left: 1%; margin-top: 10px; border-top: 10px solid #3498db; border-left: 10px solid transparent; border-right: 10px solid transparent; z-index: 100;
}
#navi > ul > li { float: left; padding: 10px 35px; border-right: 1px solid #fff; z-index: 20;
}
#navi > ul > li > a { line-height: 20px; color: #fff; text-transform: uppercase; text-decoration: none;
}
#navi > ul > li > ul { position: absolute; display: none; background: #222222; left: 0; margin-top: 10px; width: 100%; list-style: none;
}
#navi > ul > li > ul > li { border: none; position: relative; padding: 10px 15px; min-width: 105px; max-width: 500px; background: #222222; margin: 0 20px; color: #fff; border-left: 1px solid #fff; float: left;
}
#navi > ul > li > ul > li:first-child { border: none;
}
#navi > ul > li > ul > li a { color: #fff;
}
#navi > ul > li > ul > li > ul { margin-left: 0; padding: 0;
}
#navi > ul > li > ul > li > ul > li { padding: 0; min-width: 0; float: none; margin-left: 0; min-height: 10px; border: none; display: block; padding: 5px; text-align: center;
}
#navi > ul > li > ul > li > ul > li:hover { background: #3498db; min-width: 0; -webkit-transition: 0.1s background linear; -moz-transition: 0.1s background linear; -o-transition: 0.1s background linear; transition: 0.1s background linear;
}
#navi > ul > li > ul > li:hover { background: #222222;
}
#navi > ul > li:hover ul { display: block;
}
#navi > ul > li:hover ul li a { color: #fff;
}
#navi > ul > li:hover { background: #3498db;
}
#navi > ul > li:hover a { color: #fff;
}
#navi > ul > li:last-child { border: none;
}
/* Necessary Clear function for list of items */
.clear { clear: both;
}

CSS Full Width Content Menu - Script Codes JS Codes

/**
Mega Menu Dropdown
**/
CSS Full Width Content Menu - Script Codes
CSS Full Width Content Menu - Script Codes
Home Page Home
Developer Saysora
Username azureknight
Uploaded August 26, 2022
Rating 3
Size 3,712 Kb
Views 26,312
Do you need developer help for CSS Full Width Content 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!

Saysora (azureknight) Script Codes
Name
First Loading Animation
Service Card Animation
Beautiful Ribbon
Flat UI Login
Food Roulette
A Pen by Saysora
Grow Circle Animation
CSS Browser
Ralph Lauren Mimic
Responsive Background
Create amazing Facebook ads 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!