Simple Navigation List

Developer
Robert Biggs
Size
2,261 Kb
Views
28,336
  1. Simple Navigation List Previews
  2. Simple Navigation List HTML Codes
  3. Simple Navigation List CSS Codes

How do I make an simple navigation list?

What is a simple navigation list? How do you make a simple navigation list? This script and codes were developed by Robert Biggs on 24 August 2022, Wednesday.

Simple Navigation List Previews
IQ Test

Simple Navigation List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Navigation List</title> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no"> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui.ios-3.0.4.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <h1>Fruits</h1>
</nav>
<article class="current" id="fruits"> <section> <h2>Available Varieties</h2> <ul class='list'> <li class="comp" data-goto='apples'> <aside><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/apple.png" alt="" height="60" /></aside> <div> <h3>Apples</h3> <h4>Lower Colesterol</h4> </div> <aside><span class="nav"></span></aside> </li> <li class="comp" data-goto='oranges'> <aside><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/orange.png" alt="" height="60" /></aside> <div> <h3>Oranges</h3> <h4>Immune Booster</h4> </div> <aside><span class="nav"></span></aside> </li> <li class="comp" data-goto='bananas'> <aside><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/banana.png" alt="" height="60" /></aside> <div> <h3>Bananas</h3> <h4>Brain Booster</h4> </div> <aside><span class="nav"></span></aside> </li> <li class="comp" data-goto='mangos'> <aside><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/mango.png" alt="" height="60" /></aside> <div> <h3>Mangos</h3> <h4>Antioxidants</h4> </div> <aside><span class="nav"></span></aside> </li> <li class="comp" data-goto='avocados'> <aside><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/avocado.png" alt="" height="60" /></aside> <div> <h3>Avocados</h3> <h4>Omega Fats</h4> </div> <aside><span class="nav"></span></aside> </li> </ul> </section>
</article>
<nav class="next"> <a href="#" class="button back">Fruits</a> <h1>Apples</h1> </nav> <article class="next" id="apples"> <section> <h2>Uses</h2> <ul class="list"> <li> <h3>Juice</h3> </li> <li> <h3>Pastries</h3> </li> <li> <h3>Cider</h3> </li> </ul> </section> </article> <nav class="next"> <a href="#" class="button back">Fruits</a> <h1>Oranges</h1> </nav> <article class="next" id="oranges"> <section> <h2>Uses</h2> <ul class="list"> <li> <h3>Juice</h3> </li> <li> <h3>Fruit Salad</h3> </li> <li> <h3>Smoothies</h3> </li> </ul> </section> </article> <nav class="next"> <a href="#" class="button back">Fruits</a> <h1>Bananas</h1> </nav> <article class="next" id="bananas"> <section> <h2>Uses</h2> <ul class="list"> <li> <h3>Smoothies</h3> </li> <li> <h3>Fruit Salad</h3> </li> <li> <h3>Pudding</h3> </li> </ul> </section> </article> <nav class="next"> <a href="#" class="button back">Fruits</a> <h1>Mangos</h1> </nav> <article class="next" id="mangos"> <section> <h2>Uses</h2> <ul class="list"> <li> <h3>Smoothies</h3> </li> <li> <h3>Pastries</h3> </li> <li> <h3>Fruit Salad</h3> </li> </ul> </section> </article> <nav class="next"> <a href="#" class="button back">Fruits</a> <h1>Avocados</h1> </nav> <article class="next" id="avocados"> <section> <h2>Uses</h2> <ul class="list"> <li> <h3>Smoothies</h3> </li> <li> <h3>Salad</h3> </li> <li> <h3>Fresh</h3> </li> </ul> </section> </article> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chocolatechip-3.0.4.min_2.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui-3.0.4.min.js'></script>
</body>
</html>

Simple Navigation List - Script Codes CSS Codes

aside:first-of-type { width: 65px;
}
Simple Navigation List - Script Codes
Simple Navigation List - Script Codes
Home Page Home
Developer Robert Biggs
Username rbiggs
Uploaded August 24, 2022
Rating 3
Size 2,261 Kb
Views 28,336
Do you need developer help for Simple Navigation List?

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!

Robert Biggs (rbiggs) Script Codes
Name
Stepper for Android
Slide out Menu
IOS 7 Deletable List
Popover for Android
Select List for Android
IOS 7 Selection List
Slide out Menu
IOS 7 Switch
Navigation List
Dynamic List
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!