Dropdown nav example

Developer
Pablo Ai
Size
2,483 Kb
Views
32,384
  1. Dropdown nav example Previews
  2. Dropdown nav example HTML Codes
  3. Dropdown nav example CSS Codes
  4. Dropdown nav example JS Codes

How do I make an dropdown nav example?

What is a dropdown nav example? How do you make a dropdown nav example? This script and codes were developed by Pablo Ai on 08 December 2022, Thursday.

Dropdown nav example Previews
IQ Test

Dropdown nav example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dropdown nav example</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="dropdown dropdown-widget-nav"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-widget-nav" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <span class="dropdown-title">Geographical - Downloads & Subscribers</span> <span class="glyphicon glyphicon-menu-down"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdown-widget-nav"> <li data-shows=".widget-map"><a aria-role="button">Geographical - Downloads & Subscribers</a></li> <li data-shows=".widget-piechart"><a aria-role="button">Metrics - Distributed RPS Content</a></li> <li data-shows=".widget-authors"><a aria-role="button">Top Affiliated Authors in Rankings</a></li> <li data-shows=".widget-barchart"><a aria-role="button">Visits and Downloads for RPS Papers</a></li> </ul>
</div>
<div class="widget-item widget-map active"> MAP
</div>
<div class="widget-item widget-piechart"> PIE CHART
</div>
<div class="widget-item widget-authors"> AUTHORS
</div>
<div class="widget-item widget-barchart"> BAR CHARTS
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dropdown nav example - Script Codes CSS Codes

body { margin: 20px;
}
.dropdown { margin-bottom: 10px;
}
.dropdown li a { cursor: pointer;
}
.widget-item { border: 1px solid grey; display: none; padding: 50px; text-align: center;
}
.widget-item.active { display: block;
}

Dropdown nav example - Script Codes JS Codes

$( document ).ready(function() {	$('.dropdown-menu li').click(function() { var $this = $(this); var widgetSelector = $this.data('shows'); var title = $this.text();	$('.widget-item').removeClass('active'); $(widgetSelector).addClass('active'); $('.dropdown-title').text(title);	});
});
Dropdown nav example - Script Codes
Dropdown nav example - Script Codes
Home Page Home
Developer Pablo Ai
Username Pablo-Ai
Uploaded December 08, 2022
Rating 3
Size 2,483 Kb
Views 32,384
Do you need developer help for Dropdown nav example?

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!

Pablo Ai (Pablo-Ai) Script Codes
Name
VueJS
Loading donut animation
Fjsv
Fjqv
BabyStore v2
Mario Bros Mushroom Pure CSS
Complex Table PoC
Responsive table POC
A Pen by Pablo Ai
Simple custom tooltip
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!