fred.boniface/fredboniface.co.uk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reset navbar

Browse Source
This commit is contained in:
Fred Boniface 2022-10-07 20:14:11 +01:00
parent 0f89c687e0
commit a4f5367c0d
3 changed files with 124 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
css/styles.css
View File

@ -16,173 +16,118 @@ body {
/* NAVBAR STYLING BELOW */ /* NAVBAR STYLING BELOW */
/* Navbar Style */ /* Add a black background color to the top navigation */
.navbar { .topnav {
background-color: #333;
overflow: hidden; overflow: hidden;
background-color: #6b98f2; }
font-family: sans-serif;
padding: 0px 0px 0px 0px;
margin: auto; /*Changed to auto, was previously 0*/
width: 100%;
}
/* Navbar Title & Logo */ /* Style the links inside the navigation bar */
.navbar img { .topnav a {
float: left;
text-align: center;
padding: 15px 15px;
font-size: 19px;
}
/* Navbar Links Style */
.navbar a {
float: left; float: left;
display: block; display: block;
color: #f2f2f2; color: #f2f2f2;
text-align: center; text-align: center;
padding: 17px 15px; padding: 14px 16px;
font-size: 18px;
font-weight: 600;
text-decoration: none; text-decoration: none;
} font-size: 17px;
}
/* Hide 'Home' link by default, prefer icon */ /* Add an active class to highlight the current page */
.mobile { .active {
display: none; background-color: #04AA6D;
} color: white;
}
/* Navbar Logo Link Style */ /* Hide the link that should open and close the topnav on small screens */
.navbar a.logo { .topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left; float: left;
display: block; overflow: hidden;
color: #f2f2f2; }
padding: 0px 0px;
}
/* Navbar Links Style */ /* Style the dropdown button to fit inside the topnav */
.navbar i { .dropdown .dropbtn {
float: right; font-size: 17px;
display: block; border: none;
color: #f2f2f2; outline: none;
text-align: center; color: white;
padding: 17px 15px; padding: 14px 16px;
font-size: 18px; background-color: inherit;
font-weight: 600; font-family: inherit;
margin: 0;
}
/* Style the 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;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none; text-decoration: none;
} display: block;
text-align: left;
}
/* Navbar Hover Style */ /* Add a dark background on topnav links and the dropdown button on hover */
.navbar a:hover, .dropdown:hover { .topnav a:hover, .dropdown:hover .dropbtn {
background-color: #115bf0; background-color: #555;
} color: white;
}
/* Droplist Hover Style */ /* Add a grey background to dropdown links on hover */
.droplist a:hover { .dropdown-content a:hover {
background-color: #00349c; background-color: #ddd;
} color: black;
}
/* Navbar Active Class */ /* Show the dropdown menu when the user moves the mouse over the dropdown button */
.navbar a.active, .navbar img.active, .navbar button.active { .dropdown:hover .dropdown-content {
background-color: #3075ff; display: block;
} }
/* Hide Hamburger Icon */ /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
.navbar .icon { @media screen and (max-width: 600px) {
display: none; .topnav a:not(:first-child), .dropdown .dropbtn {
} display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* Dropdown Container Class */ /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
.dropdown { @media screen and (max-width: 600px) {
float: left; .topnav.responsive {position: relative;}
overflow: hidden; .topnav.responsive a.icon {
} position: absolute;
right: 0;
/* Dropdown Button Styling */ top: 0;
.dropdown .dropbutton { }
font-size: 18px; .topnav.responsive a {
border: none; float: none;
outline: none; display: block;
color: white; text-align: left;
padding: 17px 17px; }
background-color: inherit; .topnav.responsive .dropdown {float: none;}
font-family: inherit; .topnav.responsive .dropdown-content {position: relative;}
font-weight: 600; .topnav.responsive .dropdown .dropbtn {
margin: 0; display: block;
} width: 100%;
text-align: left;
/* Dropdown Content Styling */ }
.droplist { }
display: none;
position: absolute;
background-color: #115bf0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.droplist a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .droplist {
display: block;
}
/* When the screen is less than 800 pixels wide, hide all links and replace 'Home' icon with link. Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
.navbar a, .navbar img, .dropdown .dropbutton {
display: none;
}
.mobile {
display: block
}
.navbar a.icon {
float: right;
display: block;
}
.navbar i {
float: left;
}
/* Navbar Active Class */
.navbar a.active, .navbar img.active, .navbar button.active {
background-color: #3075ff;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
.navbar.responsive {position: relative;}
.navbar.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive i {
display: none
}
.navbar.responsive .dropdown {float: none;}
.navbar.responsive .droplist {position: relative;}
.navbar.responsive .dropdown .dropbutton {
display: block;
width: 100%;
text-align: left;
}
}

26
index.html
View File

@ -4,28 +4,28 @@
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="./css/styles.css"> <link rel="stylesheet" href="./css/styles.css">
<script src="/js/navbar.js"></script> <script src="/js/navbar.js"></script>
<title>Fred Boniface - Hello</title> <title>Fred Boniface</title>
</head> </head>
<body> <body>
<div class="navbar" id="navbar"> <div class="topnav" id="myTopnav">
<a class="logo" href="/"><img src="/images/navbar/home.svg" alt="Home" width="26" height="26"></a> <a href="#home" class="active">Home</a>
<div class="mobile"> <a href="#news">News</a>
<a href="/">Home</a> <a href="#contact">Contact</a>
</div>
<div class="dropdown"> <div class="dropdown">
<button class="dropbutton">Downloads &#10549;</button> <button class="dropbtn">Dropdown
<div class="droplist"> <i class="fa fa-caret-down"></i>
<a href="/downloads/vcard.vcf">&#10551; vCard</a> </button>
<a href="#">&#10551; Null</a> <div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div> </div>
</div> </div>
<a href="/pgp.php">GPG</a> <a href="#about">About</a>
<i>Fred Boniface</i>
<a href="javascript:void(0);" class="icon" onclick="hamburger()">&#9776;</a> <a href="javascript:void(0);" class="icon" onclick="hamburger()">&#9776;</a>
</div> </div>

6
js/navbar.js
View File

@ -1,9 +1,9 @@
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function hamburger() { function hamburger() {
var x = document.getElementById("navbar"); var x = document.getElementById("myTopnav");
if (x.className === "navbar") { if (x.className === "topnav") {
x.className += " responsive"; x.className += " responsive";
} else { } else {
x.className = "navbar"; x.className = "topnav";
} }
} }