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

181
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 {
background-color: #04AA6D;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none; display: none;
} }
/* Navbar Logo Link Style */ /* Dropdown container - needed to position the dropdown content */
.navbar a.logo { .dropdown {
float: left;
display: block;
color: #f2f2f2;
padding: 0px 0px;
}
/* Navbar Links Style */
.navbar i {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 17px 15px;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
/* Navbar Hover Style */
.navbar a:hover, .dropdown:hover {
background-color: #115bf0;
}
/* Droplist Hover Style */
.droplist a:hover {
background-color: #00349c;
}
/* Navbar Active Class */
.navbar a.active, .navbar img.active, .navbar button.active {
background-color: #3075ff;
}
/* Hide Hamburger Icon */
.navbar .icon {
display: none;
}
/* Dropdown Container Class */
.dropdown {
float: left; float: left;
overflow: hidden; overflow: hidden;
} }
/* Dropdown Button Styling */ /* Style the dropdown button to fit inside the topnav */
.dropdown .dropbutton { .dropdown .dropbtn {
font-size: 18px; font-size: 17px;
border: none; border: none;
outline: none; outline: none;
color: white; color: white;
padding: 17px 17px; padding: 14px 16px;
background-color: inherit; background-color: inherit;
font-family: inherit; font-family: inherit;
font-weight: 600;
margin: 0; margin: 0;
} }
/* Dropdown Content Styling */ /* Style the dropdown content (hidden by default) */
.droplist { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
background-color: #115bf0; background-color: #f9f9f9;
min-width: 160px; min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1; z-index: 1;
} }
/* Style the links inside the dropdown */ /* Style the links inside the dropdown */
.droplist a { .dropdown-content a {
float: none; float: none;
color: white; color: black;
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
text-align: left; text-align: left;
} }
/* Show the dropdown menu when the user moves the mouse over the dropdown button */ /* Add a dark background on topnav links and the dropdown button on hover */
.dropdown:hover .droplist { .topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block; 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) */ /* 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) */
@media screen and (max-width: 800px) { @media screen and (max-width: 600px) {
.navbar a, .navbar img, .dropdown .dropbutton { .topnav a:not(:first-child), .dropdown .dropbtn {
display: none; display: none;
} }
.topnav a.icon {
.mobile {
display: block
}
.navbar a.icon {
float: right; float: right;
display: block; display: block;
} }
.navbar i { }
float: left;
}
/* Navbar Active 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) */
.navbar a.active, .navbar img.active, .navbar button.active { @media screen and (max-width: 600px) {
background-color: #3075ff; .topnav.responsive {position: relative;}
} .topnav.responsive a.icon {
}
/* 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; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
} }
.navbar.responsive a { .topnav.responsive a {
float: none; float: none;
display: block; display: block;
text-align: left; text-align: left;
} }
.topnav.responsive .dropdown {float: none;}
.navbar.responsive i { .topnav.responsive .dropdown-content {position: relative;}
display: none .topnav.responsive .dropdown .dropbtn {
}
.navbar.responsive .dropdown {float: none;}
.navbar.responsive .droplist {position: relative;}
.navbar.responsive .dropdown .dropbutton {
display: block; display: block;
width: 100%; width: 100%;
text-align: left; 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";
} }
} }