xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Bar</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
</html>
xxxxxxxxxx
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #2d3436;
}
nav {
margin-top: 200px;
text-align: center;
}
nav ul {
display: inline-block;
list-style: none;
transform: skew(-25deg);
}
nav ul li {
background-color: #fff;
float: left;
border-right: 1px solid #eee;
box-shadow: 1.95px 1.95px 2.6px rgba(0, 0, 0, 1);
text-transform: uppercase;
color: #555;
font-weight: 400;
transition: all 0.2s linear;
}
nav ul li:hover {
background-color: #0984e3;
color: #fff;
}
a {
color: inherit;
display: block;
padding: 10px 20px;
text-decoration: none;
transform: skew(25deg);
}
/* top-left top-right bottom-right bottom-left */
nav ul li:first-child {
border-radius: 7px 0 0 7px;
}
nav ul li:last-child {
border-radius: 0 7px 7px 0;
}
xxxxxxxxxx
menu bar nav
.nav-container{
max-width:90vw;
height:100%;
background-color:yellow;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}
xxxxxxxxxx
<!-- Horisontal-Vertical Menu, https://coursesweb.net/ -->
<ul id="menuv">
<li class="oli"><a href="https://coursesweb.net/" title="Home">Home</a></li>
<li class="oli">CSS Tutorials
<ul>
<li><a href="https://coursesweb.net/css/css3-new-background-properties_t" title="Border properties">CSS3 Border properties</a></li>
<li><a href="https://coursesweb.net/css/css3-opacity_t" title="opacity">CSS3 opacity</a></li>
</ul>
</li>
<li class="oli">HTML Tutorials
<ul>
<li><a href="https://coursesweb.net/html/html5-quick-tutorial_t" title="HTML5 Quick Tutorial">HTML5 Quick Tutorial</a></li>
<li><a href="https://coursesweb.net/html/html5-canvas_t" title="HTML5 canvas Tutorial">HTML5 canvas Tutorial</a></li>
<li><a href="https://coursesweb.net/html/html5-new-tags_t" title="HTML5 New Tags">HTML5 New Tags</a></li>
</ul>
</li>
<li class="oli"><a href="https://coursesweb.net/ex/contact" title="Contact">Contact</a></li>
</ul>
<script type="text/javascript"><!--
// gets all <li> within #menu element
var menuli = document.getElementById('menuv').getElementsByTagName('li');
var nrmenuli = menuli.length;
var oli = []; // store horisontal menu items
var crt_oli; // store current horisontal element
var vli = []; // store vertical menu list in within current horisontal element
var nroli = 0; // number of horisontal menu items
var nrvli = 0; // number of vertical menu lists
var url_adr = ''; // store the URL address added in the anchor <a> of current navigated list
// traverse $menuli to add the horisontal menus in $oli
for(var i=0; i<nrmenuli; i++) {
if(menuli[i].className == 'oli') {
oli.push(menuli[i]);
}
}
var ih = -1; // to store the index of current horizontal item in $oli
var iv = -1; // to store the index of current vertical item in $vli
// accessed on press the Left /Right arrow keys
// show current horisontal menu
function showOli(index) {
iv = -1; // reset imdex of vertical menu when moves to other horisontal menu
url_adr = ''; // empty this variable
for(var i=0; i<nroli; i++) {
oli[i].className = 'oli';
}
crt_oli = oli[index]; // store current horisontal element
crt_oli.className = 'olishow'; // set class="olishow"
// if current horisontal menu contains vertical menu, store it in $vli, and display it
if(crt_oli.getElementsByTagName('ul').length > 0 && crt_oli.getElementsByTagName('ul')[0].getElementsByTagName('li')) {
vli = crt_oli.getElementsByTagName('ul')[0].getElementsByTagName('li');
nrvli = vli.length;
showVli(); // calls showVli() to set class="vli" to all list in its vertical menu
}
else {
// if current horisontal menu no has vertical list
// if contains a link, calls the function setUrlAdr() to add its "href" value in $url_adr
if(crt_oli.getElementsByTagName('a').length > 0) setUrlAdr(crt_oli.getElementsByTagName('a')[0]);
vli = []; // empties $vli
nrvli = 0;
}
}
// accessed on press the Up /Down arrow keys
// show current vertical menu
function showVli(index) {
url_adr = ''; // empties this variable
if(nrvli > 0) {
for(var i=0; i<nrvli; i++) {
vli[i].className = 'vli';
}
if(index >= 0) {
vli[index].className = 'vlishow';
// if contains a link, calls the function setUrlAdr() to add its "href" value in $url_adr
if(vli[index].getElementsByTagName('a').length > 0) setUrlAdr(vli[index].getElementsByTagName('a')[0]);
}
}
}
// adds in $url_adr the "href" value of the anchor element <a> passed in "link" parameter
function setUrlAdr(link) {
url_adr = link.href;
}
// function with code to get the pressed keyboard key
function KeyCheck(e){
// https://coursesweb.net/
nroli = oli.length;
var keyid = (window.event) ? event.keyCode : e.keyCode; // get the code of the key pressed
// modify the index of horisontal /vertical item, calls the indicated function according to pressed key
switch(keyid) {
// Left
case 37:
ih--;
if(ih < 0) ih = 0;
showOli(ih);
break;
// Up
case 38:
iv--;
if(iv < 0) iv = 0;
showVli(iv);
break;
// Right
case 39:
ih++;
if(ih >= nroli) ih = 0;
showOli(ih);
break;
// Down
case 40:
iv++;
if(iv >= nrvli) iv = 0;
showVli(iv);
break;
// Enter (opens the link)
case 13:
if(url_adr != '') window.location = url_adr;
break;
}
}
// access the KeyCheck() function when a keyboard button is pressed
document.onkeydown = KeyCheck;
--></script>