Simple SCSS Dropdown Nav

Developer
Peter Appleyard
Size
5,329 Kb
Views
30,360
  1. Simple SCSS Dropdown Nav Previews
  2. Simple SCSS Dropdown Nav HTML Codes
  3. Simple SCSS Dropdown Nav CSS Codes

How do I make an simple scss dropdown nav?

What is a simple scss dropdown nav? How do you make a simple scss dropdown nav? This script and codes were developed by Peter Appleyard on 28 September 2022, Wednesday.

Simple SCSS Dropdown Nav Previews
IQ Test

Simple SCSS Dropdown Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple SCSS Dropdown Nav</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="mainNav clear"> <div class="logo">Logo</div> <ul> <li><a href="/home.html">Home</a></li> <li><a href="">About</a> <ul> <li><a href="/about.html">About Spec Ops</a></li> <li><a href="/tactical-paintball-equipment.html">Equipment</a></li> <li><a href="#">Battlefield & Games</a></li> <li><a href="/location.html">Location</a></li> <li><a href="#">Information Packs</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Feedback</a></li> </ul> </li> <li><a href="">Pricing</a> <ul> <li><a href="/prices-packages.html">Prices & Packages</a></li> <li><a href="/mid-week-specials.html">Midweek Specials</a></li> <li><a href="/special-paintball-functions.html">Special Functions</a></li> <li><a href="/special-offers.html">Special Offers</a></li> <li><a href="how-to-book.html">How To Book</a></li> </ul> </li> <li><a href="">Gallery</a></li> <li><a href="">Book Now</a></li> <li><a href="">Contact Us</a></li> </ul>
</nav>
<img src="https://placekitten.com/1700/600" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid labore doloremque nulla, necessitatibus iusto distinctio possimus fugit nobis. Veritatis quasi optio quisquam perferendis vitae sunt atque perspiciatis voluptas molestiae voluptates nesciunt, aspernatur commodi harum officiis blanditiis! Quaerat tempore facere aliquid neque sint nesciunt dicta odit quasi quam possimus dolores esse alias facilis, voluptatum ab vel aperiam atque earum eligendi nulla molestiae. Totam similique unde fugit, veritatis ullam laboriosam ipsam incidunt architecto omnis obcaecati animi qui, fuga voluptatum quidem quis. Accusantium nisi porro veritatis labore, accusamus. Sit dolorum aspernatur blanditiis neque eius corporis amet voluptas, quas voluptatibus, nobis vel in. Nemo temporibus eos qui eum sunt ut minima quasi vero consequuntur fugit, est illum numquam beatae id delectus veritatis, dolores rerum eaque voluptatem quis eius libero unde animi quia? Non consectetur aliquid maiores optio nostrum, distinctio ratione sequi. Nihil at, mollitia accusamus reprehenderit quisquam consequuntur animi assumenda doloremque non laudantium. Cum nihil ipsa vel culpa explicabo iste blanditiis fugiat natus inventore officia optio dolorum minima omnis adipisci sunt debitis maxime, vitae voluptate voluptatibus recusandae cumque ipsam odio. Et laudantium dolorem ab ipsum cupiditate odio eligendi numquam id iusto saepe quos debitis doloribus voluptate vero consectetur recusandae eos distinctio libero nobis, ipsa. Quod sapiente adipisci quis repellendus quasi asperiores laboriosam ducimus libero, porro veniam, quas dolores perferendis amet, doloremque corporis delectus in cum sit magni. Natus, expedita, harum. Similique sed molestias itaque consequuntur ratione necessitatibus eos animi accusantium ipsum, quidem pariatur tempora iure vero enim dolorum impedit. Veniam veritatis sapiente inventore, tempore officiis fugit eos tempora dignissimos provident vitae quisquam dolor. Reiciendis rem, quos dolorum perspiciatis magni, corrupti esse eligendi quas libero nihil! Quis rem omnis, totam repudiandae deserunt, voluptatem. Facilis quae dolorem expedita, veniam voluptate reprehenderit cumque, nesciunt dolorum nobis, molestias maiores ducimus est architecto assumenda aspernatur. Modi vel quae, repudiandae, consequatur commodi, inventore, totam nostrum obcaecati in aspernatur provident veniam quam quisquam cumque. Obcaecati pariatur saepe omnis non, voluptates ullam repellat explicabo adipisci ea harum id, consectetur itaque ducimus ipsam commodi illum delectus autem suscipit reiciendis. Est, deserunt quae quo praesentium eaque adipisci, dolorem facilis officia, nemo dignissimos id earum quod, facere natus maiores? Id quam exercitationem laborum voluptate quia facilis, temporibus nisi officiis! Tempore, iusto. Asperiores, delectus quas! Debitis repellat labore laudantium consequatur adipisci, hic aspernatur eius non cum molestias totam repudiandae neque, earum modi asperiores, in soluta necessitatibus fugiat repellendus nemo facere eligendi. Id nostrum nihil possimus maxime autem nesciunt natus libero maiores eius officiis. Repudiandae ut saepe quia nemo magnam, magni rem expedita minima quibusdam nostrum eos dolorum maiores alias placeat. Quos quia nulla autem eius repellat assumenda ea aut ut eaque incidunt. Sequi architecto dolorum molestias autem aut alias blanditiis officiis quia labore odio quasi, nulla, error fugit rerum soluta deleniti debitis magni sit quae? Impedit, aliquam ullam unde doloremque dolores saepe eos libero, sapiente quae enim veniam recusandae aspernatur, numquam mollitia blanditiis facilis illo incidunt dolor pariatur minus iste. Nihil reiciendis aspernatur reprehenderit nobis voluptatum ut voluptate quaerat et, nulla, laudantium eveniet, rem ad unde illum saepe aperiam cumque, iure nesciunt quasi ducimus doloremque architecto. Laudantium repudiandae nostrum cum molestiae inventore voluptates neque, blanditiis quasi quod corporis, repellat nisi ex saepe veniam explicabo similique dolorem alias voluptatibus laborum exercitationem culpa numquam ipsum! Minima, perferendis porro fuga necessitatibus expedita! Reprehenderit doloribus autem dolorum explicabo quasi, assumenda distinctio officia, repellendus eaque maxime suscipit consectetur dolorem incidunt expedita quidem. Facilis, nesciunt rem quas accusamus suscipit, deleniti numquam cum aut vitae dolorem incidunt odit, dicta fuga quis quo optio minima magnam. Odio beatae fugiat, vel voluptatem numquam recusandae, facere, iure reprehenderit nostrum veniam doloribus. Quis dolore cumque recusandae inventore quaerat. Quos harum repellendus labore dolorum asperiores amet a minus maiores nihil at molestias commodi nemo itaque modi atque similique aspernatur magnam natus, dignissimos neque quas? At tempore atque voluptate odio hic laudantium temporibus commodi ut, nostrum dolore perferendis neque voluptatum quas impedit culpa earum perspiciatis recusandae fuga deserunt, a quae numquam incidunt et! Architecto ut debitis nesciunt, accusantium assumenda et dolor temporibus, quia sed hic non qui dignissimos vel voluptas nulla, nemo itaque nobis voluptates dolorem explicabo facilis deserunt eligendi officiis. Dolores, eos animi id esse reiciendis asperiores minima placeat tenetur fugit, voluptatem nam, molestias dolorum, repellendus quam soluta numquam recusandae sint possimus obcaecati. Dicta cum animi error impedit tempora fuga pariatur illum odit, aliquid possimus voluptate laborum dolore voluptates. Ipsa reprehenderit eveniet odit maxime iste, id cupiditate libero qui dolorum nobis veniam voluptatibus repellat temporibus officia accusamus quidem totam nostrum consequatur possimus illo, nulla omnis, provident obcaecati delectus! Laborum ex, incidunt iure fuga nesciunt quidem soluta sequi dolore temporibus modi, ipsa mollitia assumenda ipsum iusto optio consequatur beatae exercitationem aspernatur. Exercitationem magni vel sed ab dolores omnis fugit, aliquam nemo quisquam esse odio eius quasi iure laboriosam, vitae nobis quam harum aspernatur distinctio cupiditate! Voluptates, modi consequuntur aspernatur. Aliquam pariatur, modi, vel ducimus quis esse magnam repudiandae voluptatibus quod perferendis quia doloremque cum, labore rerum porro. Veniam expedita mollitia minus. Sunt architecto minus dolores illum aperiam, tenetur odit impedit, porro asperiores sint, quae sed? Aut sapiente nostrum, consequuntur minus hic delectus, cum, enim vel quae esse illo voluptatum in! Eaque, repudiandae vel architecto excepturi, explicabo cum nam reiciendis saepe, magnam voluptate dolorum et officia repellat quaerat blanditiis repellendus. Possimus illum quaerat voluptatem quia labore nam, minima, aut! Doloribus voluptatum ipsam asperiores! Ipsam vel, at facilis qui. Repellat, temporibus dolorem nobis, dolore ducimus molestiae vel ipsam ex eos numquam.</p>
</body>
</html>

Simple SCSS Dropdown Nav - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=BenchNine:400);
img { width: 100%;
}
.logo { box-sizing: border-box; float: left; background-color: #bada55; width: 60px; height: 60px; text-align: center; border-radius: 50%; margin-top: 10px; margin-left: 30px; padding-top: 20px; font-family: georgia; font-weight: bold; text-transform: lowercase; color: #FFF; font-style: italic;
}
.mainNav { width: 100%; background-color: #333;
}
.mainNav ul { margin: 0; padding: 0; float: right; margin: auto;
}
.mainNav ul li { float: left; display: inline-block;
}
.mainNav ul li ul { display: none; position: absolute; background: #fff; padding: 0; margin: 0; z-index: 200;
}
.mainNav ul li ul li { float: none; display: block;
}
.mainNav ul li ul li a { display: block; background-color: #333; padding: 12px 30px;
}
.mainNav ul li ul li a:hover { background-color: #1a1a1a;
}
.mainNav ul li a { display: block; padding: 30px; text-decoration: none; background-color: #333; color: #FFF; font-family: 'BenchNine', sans-serif; text-transform: uppercase; font-size: 19px;
}
.mainNav ul li a:hover { background-color: #1a1a1a;
}
.mainNav ul li:hover > ul { display: block;
}
.clear:before,
.clear:after { content: " "; display: table;
}
.clear:after { clear: both;
}
Simple SCSS Dropdown Nav - Script Codes
Simple SCSS Dropdown Nav - Script Codes
Home Page Home
Developer Peter Appleyard
Username whodaman
Uploaded September 28, 2022
Rating 3
Size 5,329 Kb
Views 30,360
Do you need developer help for Simple SCSS Dropdown Nav?

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!

Peter Appleyard (whodaman) Script Codes
Name
Builtform Flexbox Grid
Tabbed Navigation
Responsive Drop Down Menu
Waypoints Menu Colour Change
Show and hide, based on webapp id business catalyst
LiScroll 1.0 fluid
Navigation Play
Slicknav testing
Jquery.slimmenu.js testing
Function for responsively loading carousel items with Cycle2
Create amazing love letters 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!