I'm testing a navigation bar at top of the web page with a dropbox menu align at right. I have a lot of problems with space from the menu to the background of the bar and also with align icons with text.
My Code is this:
function dropdownClick() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
#charset "UTF-8";
/* CSS Document */
html
{
position: relative;
min-height: 100%;
font-family: Gotham-Light;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
/* Def. Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dedee1;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="assets/css-styles/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>navigation</title>
</head>
<body>
<!-- NAVIGATION -->
<nav>
<ul>
<li>Page1</li>
<li>Page2</li>
<li style="float:right" class="dropdown">
<a class="dropbtn" onclick="dropdownClick()"><i class="material-icons">face</i>Username</a>
<div class="dropdown-content" id="myDropdown">
<i class="material-icons">settings</i> preferències
<i class="material-icons">lock</i> canviar password
<i class="material-icons">power_settings_new</i> log out
</div>
</li>
</ul>
</nav>
</body>
</html>
The boxes of the active link doesn't align to the top of the navigation bar And the icon with the text 'username' aresn't align with each other.
Sorry but I'm beginner in the css styles.
Thanks in advance.
Change li a, .dropbtn display to block instead of inline-block (that causes in this case an unwanted margin).
Another reason is the i, give that a float: left;
Last problem is that submenu appears outside the screen, add a right: 0 to it.
function dropdownClick() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
#charset "UTF-8";
/* CSS Document */
html
{
position: relative;
min-height: 100%;
font-family: Gotham-Light;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
/* Def. Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dedee1;
}
li {
float: left;
}
li a, .dropbtn {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
.dropbtn i { float: left; }
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="assets/css-styles/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>navigation</title>
</head>
<body>
<!-- NAVIGATION -->
<nav>
<ul>
<li>Page1</li>
<li>Page2</li>
<li style="float:right" class="dropdown">
<a class="dropbtn" onclick="dropdownClick()"><i class="material-icons">face</i>Username</a>
<div class="dropdown-content" id="myDropdown">
<i class="material-icons">settings</i> preferències
<i class="material-icons">lock</i> canviar password
<i class="material-icons">power_settings_new</i> log out
</div>
</li>
</ul>
</nav>
</body>
</html>
Related
I wanted to create a navigation menu, but last item after zooming out, for example at 90% zoom goes down. "Five" is located under "Four" item. Navigation should be static in size and span one line, not two. All items should occupy the entire size of the div#page (960px, 192px*5) in one bar.
body {
background-color: blue;
margin: 0;
}
.wrapper {
width: 960px;
margin: 20px auto 0 auto;
}
#page {
background-color: #777272;
width: 100%;
height: 800px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
}
nav ul li a {
text-decoration: none;
display: block;
background-color: purple;
width: 170px;
height: 20px;
line-height: 20px;
padding: 10px;
border: 1px solid black;
text-align: center;
margin: 5px 0px 20px 0;
}
a:visited {
color: white;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div id="page">
<nav>
<ul>
<li>One "1" One</li>
<li>Two "2" Two</li>
<li>Three "3" Three</li>
<li>Four "4" Four</li>
<li>Five "5" Five</li>
</ul>
</nav>
<ul class="clear">
<li>Tomato</li>
<li>Cucumber</li>
<li>Carrot</li>
</ul>
</div>
</div>
</body>
</html>
Simply remove this style:
nav ul li {
float: left;
} // not needed
and add this style:
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex; // this has been added
}
JSFiddle:
https://jsfiddle.net/1c2gsn34/
EDIT: In 33% UI is breaking, due to width:170px. Please remove the width from a instead of width use
nav ul li {
flex: 1;
}
Here you go this is what you want.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Source : W3school
I've been trying to make my nav (including the "works" dropdown button) responsive by making them appear through the usual three parallel lines on the top right margin that would then display what I've written on the nav bar when clicked from a mobile.
I've been trying for about two hours without a decent result.
I'm pretty sure it's not the hardest thing but I can't seem to get it right. Would love to understand how it works. Here's the desktop size, non-responsive navbar.
Here's the html:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AURORA CATERA -- 2020 ALL RIGHT RESERVED</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel='icon' href='FAVICON.jpg' type='image/x-icon'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="img/AURORA-YLOW-FIN.png" alt="logo"></div>
<div class="menu">
<ul>
<li>ALL</li>
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
<li>ABOUT</li>
<li>CONTACT</li>
<li><i class="fa fa-instagram"></li></i>
</ul>
</div>
</body>
</html>
and here is the CSS:
.wrapper{
width: 100%;
}
body{
margin: 0;
padding: 0;
background-color: black;
}
.header{
padding: 5px 0px;
display: inline-block;
width: 100%;
}
.header img{
max-height: 400px;
max-width: 550px;
margin-left: 60px;
margin-top: 30px;
}
.menu{
float: right;
position: relative;
display: inline-block;
top: -85px;
left: 0px;
margin-right: 70px;
}
.menu ul li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.menu ul li a{
text-decoration: none;
color:#F8E315;
font-family: Rajdhani, "sanf serif";
font-size: 15px;
padding: 5px 10px;
}
.menu ul li a:hover{
color:#C7C7C7;
}
.dropbtn {
background-color: black;
color: #F8E315;
padding: 14px;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
border: none;
}
.dropbtn:hover{
color: #c7c7c7;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #F8E315;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: black;
color: #c7c7c7;
}
.dropdown:hover .dropdown-content {
display: block;
}
A basic burger-menu can be achieved by doing the following steps:
1) Create a with the class of burger-menu as a previous sibling element of the navigation you want to hide on mobile screen width.
a) You dont want this to show on your desktop medias, so in the css, style it as display: none;
2) Create a media query for the desired device. Let's say 480px for a mobile device.
3) Within this media query, style the navigation that you want to appear on hover (or click) as display: none;
4) Within this media query, style your burger-menu. In my example, I've styled something very basic, for time reasons, but you can research using spans to make a responsive burger menu.
5) Within this media query, declare an on hover pseudo-class for your burger-menu which accesses the hidden navigation. Since you placed the burger-menu as a the previous sibling element of your navigation, you can use the + css rule to target it like so
.burger-menu:hover + .menu {
}
This means that, when you hover over the burger-menu, you will affect the css of .menu. You can place how .menu's styles will be affected in the above CSS selector.
Here is a basic example of how this process works with your code.
Add this to your html, before your .menu <div>
<div class="burger-menu"></div>
<div class="menu">
Add this to your css file, at the bottom
.burger-menu {
display: none;
}
#media (max-width: 480px) {
.menu {
display: none;
}
.burger-menu {
display: block;
background-color: white;
height: 30px;
width: 30px;
position: fixed;
top: 10px;
right: 10px;
}
.burger-menu:hover + .menu {
display: block;
}
}
Typically, you would advance this by using toggleClass with JQuery to add and remove display to your navigation menu on clicking the burger menu.
P.s the benefit of using spans to create your burger-menu will be when you want it to have nice animation, changing from a burger menu to a cross, or arrow, etc.
here is a solution with a responsive menu list. Now you should add this menu list to your project.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.menu li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.topnav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a, li {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
ALL
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
ABOUT
CONTACT
<a href="https://www.instagram.com/auroracatera" target="_blank"> <i class="fa fa-instagram"></i>
</a>
☰
</div>
I hope you can do something with it and add it to your project ...
I've been tampering around in W3 Schools and so far I've gotten the desired effect, but the navbar now expands with the dropdown menu. Is there a better way of doing this that I'm missing? Apologies in advance for formatting, and thank you for your time.
EDIT: To hopefully clarify a bit further: Example
Link to the W3schools thing: https://www.w3schools.com/code/tryit.asp?filename=GD1ZCKC1TKED
The code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mainNav {
background-color: #000;
padding:12px 10px 0px 0px;
float: right;
overflow: hidden;
}
.mainNav a {
color: #FFF;
float: left;
display: block;
padding: 15px;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.mainNav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.mainNav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 500px) {
.logo {
max-width: 25%;
height: auto;
padding-top:10px;
margin-bottom:-50px;
display: block;
margin: auto;
}
.mainNav{
background-color: black;
width:100%;
font-size: 18px;
}
.mainNav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.mainNav a.icon {
float: right;
display: block;
}
.mainNav.responsive {
position: relative;
}
.mainNav.responsive .icon {
position: absolute;
right: 0;
top: 15px;
}
.mainNav.responsive a {
float: none;
display: block;
text-align: center;
}
.mainNav.responsive .dropdown {
float: none;
}
.mainNav.responsive .dropdown-content {
position: relative;
}
.mainNav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: center;
}
}
</style>
</head>
<body>
<div class="mainNav" id="navID">
Temp1
<div class="dropdown">
<button class="dropbtn">Temp2 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Temp3<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Temp4 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Temp5
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("navID");
if (x.className === "mainNav") {
x.className += " responsive";
} else {
x.className = "mainNav";
}
}
</script>
</body>
</html>
The reason your entire nav is expanding is due to the positioning of the item. You have the .dropdown-content set to position: relative; By changing this to position: absolute; it will fix the first issue.
However, now to get the width the same as the parent, there are a few ways to do this. The easiest would be to simply set a width property to the dropdown-content as well, so it is always the same. The only issue will be if you have longer dropdown content areas so that the words are cut off. If this is the case, you can use min-width instead. I have calculated the width to be 97.45px; from the padding used on the <button> tag.
So all you will need to do is change your css of .dropdown-content to :
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 97.45px;
}
or, like I said min-width: 97.45px; . This will keep it the same width as the parent while allowing options to expand with larger content.
If this isn't what you're looking for, please comment reply to this and I'd be happy to help. There's a few different ways to accomplish this. Purely setting a width might just be the most simple. Btw, welcome to Stack Overflow
I'm working on a website for a school project, i took this format from w3schools and I need to adjust it a bit:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
More Links
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
i tried to have sub-sub tabs, means that another menu will continue from "More links".
i tried to do some stuff but failed.
and how do i keep the top menu always in place (even after i go to a different link)?
Here's a really basic example that could be improved. There are LOTS of ways to do this. Just a couple of basic functions on mouse enter of the required elements, and changing the CSS classes to keep the sub nav visible on screen if the mouse is over it.
https://codepen.io/cove/pen/VwLdLKr
The javascript:
var dropdown_sub_nav = document.getElementById('dropdown-sub-nav');
var sub_links_1 = document.getElementById('sub-links-1');
dropdown_sub_nav.addEventListener('mouseenter', (event) => {
sub_links_1.setAttribute('class', 'dropdown-content sub-links sub-links-active');
});
dropdown_sub_nav.addEventListener('mouseout', (event) => {
sub_links_1.setAttribute('class', 'sub-links');
});
sub_links_1.addEventListener('mouseenter', (event) => {
sub_links_1.setAttribute('class', 'dropdown-content sub-links sub-links-active');
})
I would ask you how you are going to make this type of navigation truly responsive, as these kinds of hover states aren't user friendly on mobile devices. Will you hide this nav, and show a mobile friendly one?
So, I found this link on clickable dropdown menus but when I implement that, it doesn't work for some reason. I tried adding the html into the gadget but I don't know where to put the JavaScript in.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
This is the same code used in the example you sent, you can get the javascript and insert at the end of the html between two script tags like this:
<script type="text/javascript">
<!-- javascript GOES HERE -->
<script>
You can add javascript code inside html putting it inside <script></script> tag
Create Drop down menu in blogger using add custom Gadget. In this you can add your own codes. This requires a little bit of CSS and HTML knowledge. Try my code to create drop down menu in blogger. referenced from this blogger post
.dropdown-section1{
border-radius:3px;
width:80%;margin:0 auto;
background:#607d8b;
height:38px;
-webkit-box-shadow: 0 3px 4px 0 rgba(50,50,50,.6);
-moz-box-shadow: 0 3px 4px 0 rgba(50,50,50,.6);
box-shadow: 0 3px 4px 0 rgba(50,50,50,.6);
}
.dropdown-section1 .menu li a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
.dropdown-section1 .menu li {
list-style: none;
float: left;
padding: 10px;
background:#607d8b;
}
.dropdown-section1 .menu li:last-child{
border-right:none !important;
}
.dropdown-section1 .menu .sub-menu li{
float: none;
margin-bottom:0px;
padding: 10px;
}
.dropdown-section1 .sub-menu {
display: none;
position: absolute;
z-index: 100;
width:100px;
margin-left: -50px !important;
margin-top: 10px !important;
}
.dropdown-section1 .menu li:hover > .sub-menu {
display: block;
}
.dropdown-section1 .menu li:hover {
background:#94c018;
}
.dropdown-section1 .menu > li {
border-right:1px solid #ccc;
}
.dropdown-section1 .place-right{
left: 150px;
top: 30px;
}
<div class="dropdown-section1">
<ul class="menu">
<li>Home</li>
<li>Coose Niche
</li><li>Create Blog
</li><li>Moniter Blog
</li><li>DropDown
<ul class="sub-menu">
<li>String</li>
<li>Array
<ul class="sub-menu place-right">
<li>String</li>
<li>Array</li>
<li>Match</li>
</ul>
</li>
<li>Match</li>
</ul>
</li>
<li>About Me</li>
<li>Reach Me</li>
</ul>
</div>