Below you can look on source code. It is devided on three files:
Index.html
<html>
<head>
<title>Dawid Andrejczuk</title>
<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="megadroplinemenu.css" />
</head>
<body>
<h1>AJAX - task 5</h1>
<div id="megadroplinemenu">
<ul>
<li><a href="#">Task 1</a>
<ul>
<li><a href="http://10.44.99.99:23880/~244885/task_1.html" target="_blank">Task 1 webpage<div>You can look how code is executed.</div></a></li>
<li><a href="./Project_no._1.pdf" download="Instruction 1.pdf" target="_blank">Instruction<div>Instruction to the task.</div></a></li>
<li><a href="./task_1.html" download="task 1.html" target="_blank">Main HTML file<div>Sorce code to download.</div></a></li>
<li><a href="./Task_1.docx" download="report 1.docx" target="_blank">Report no.1<div>Report to download.</div></a></li>
</ul>
</li>
<li><a href="#">Task 2</a>
<ul>
<li><a href="http://10.44.99.99:23880/~244885/task_2.html" target="_blank">Task 2 webpage<div>You can look how code is executed.</div></a></li>
<li><a href="./Project_no._2.pdf" download="Instruction 2.pdf" target="_blank">Instruction<div>Instruction to the task.</div></a></li>
<li><a href="./task_2.html" download="task 2.html" target="_blank">Main HTML file<div>Sorce code to download.</div></a></li>
<li><a href="./styles.css" download="styles.css" target="_blank">Styles file<div>Additional file with styles.</div></a></li>
<li><a href="./Task_2.docx" download="report 2.docx" target="_blank">Report no.2<div>Report to download.</div></a></li>
</ul>
</li>
<li><a href="#">Task 3</a>
<ul>
<li><a href="http://10.44.99.99:23880/~244885/task_3.html" target="_blank">Task 3 webpage<div>You can look how code is executed.</div></a></li>
<li><a href="./Project_no._3.pdf" download="Instruction 3.pdf" target="_blank">Instruction<div>Instruction to the task.</div></a></li>
<li><a href="./task_3.html" download="task 3.html" target="_blank">Main HTML file<div>Sorce code to download.</div></a></li>
<li><a href="./Task_3.docx" download="report 3.docx" target="_blank">Report no.3<div>Report to download.</div></a></li>
</ul>
</li>
<li><a href="#">Task 4</a>
<ul>
<li><a href="http://10.44.99.99:23880/~244885/task_4.html" target="_blank">Task 4 webpage<div>You can look how code is executed.</div></a></li>
<li><a href="./Project_no._4.pdf" download="Instruction 4.pdf" target="_blank">Instruction<div>Instruction to the task.</div></a></li>
<li><a href="./task_4.html" download="task 4.html" target="_blank">Main HTML file<div>Sorce code to download.</div></a></li>
<li><a href="./link1.html" download="link1.html" target="_blank">Link 1 for iFrame<div>Sorce code for link 1.</div></a></li>
<li><a href="./link2.html" download="link2.html" target="_blank">Link 2 for iFrame<div>Sorce code for link 2.</div></a></li>
<li><a href="./link3.html" download="link3.html" target="_blank">Link 3 for iFrame<div>Sorce code for link 3.</div></a></li>
<li><a href="./Task_4.docx" download="report 4.docx" target="_blank">Report no.4<div>Report to download.</div></a></li>
</ul>
</li>
<li id="searchtoggler" class="noarrow"><a href="#"><label class="fa fa-search" aria-hidden="true"></label></a>
<ul>
<li><input name="search" id="search" type="text" placeholder="Search Site" /></li>
</ul>
</li>
<li class="noarrow"><a href="#"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</li>
</ul>
</div>
<div id="burgertoggler">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<script src="megadroplinemenu.js">
</script>
</body>
</html>
Megadroplinemenu.js
(function(){
var megadropline = document.getElementById('megadroplinemenu')
var megatopul = megadropline.getElementsByTagName('ul')[0];
var searchtoggler = document.getElementById('searchtoggler')
if (searchtoggler){
var searchfield = searchtoggler.getElementsByTagName('input')[0]
}
var burgertoggler = document.getElementById('burgertoggler')
var subuls = megadropline.getElementsByTagName('ul')
var isTouch = false //var to indicate current input type (is touch versus no touch)
var isTouchTimer
var curRootClass = '' //var indicating current document root class ("can-touch" or "")
for (var i=0; i<subuls.length; i++){
var parentA = subuls[i].parentNode.getElementsByTagName('a')[0]
parentA.addEventListener('click', function(e){
if (curRootClass == 'can-touch'){ // if user touches menu item with sub UL, disable default action to navigate to link
e.preventDefault()
}
}, false)
}
if (searchtoggler && searchfield){
searchtoggler.addEventListener('click', function(e){ //when user clicks on search icon
searchfield.focus()
}, false)
}
burgertoggler.addEventListener('click', function(e){
megadropline.classList.toggle('open') // open mobile centric menu
this.classList.toggle('open')
}, false)
/* Code to detect touch support: http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml */
function addtouchclass(e){
clearTimeout(isTouchTimer)
isTouch = true
if (curRootClass != 'can-touch'){ //add "can-touch' class if it's not already present
curRootClass = 'can-touch'
document.documentElement.classList.add(curRootClass)
}
isTouchTimer = setTimeout(function(){isTouch = false}, 500) //maintain "istouch" state for 500ms so removetouchclass doesn't get fired immediately following a touch event
}
function removetouchclass(e){
if (!isTouch && curRootClass == 'can-touch'){ //remove 'can-touch' class if not triggered by a touch event and class is present
isTouch = false
curRootClass = ''
document.documentElement.classList.remove('can-touch')
}
}
document.addEventListener('touchstart', addtouchclass, false) //this event only gets called when input type is touch
document.addEventListener('mouseover', removetouchclass, false) //this event gets called when input type is everything from touch to mouse/ trackpad
})()
Megadroplinemenu.css
#megadroplinemenu {
font: bold 16px 'Bitter', sans-serif;
/* use Google font */
position: relative;
z-index: 1000;
background: white;
border: 1px solid #ddd;
}
#megadroplinemenu * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* fontawesome style. Remove if not using FA icons */
#megadroplinemenu .fa {
font-size: 1.5em;
}
#megadroplinemenu .fa-twitter {
color: #00ACEE;
}
/* Top Level Menu */
#megadroplinemenu ul {
z-index: 100;
margin: 0;
padding: 0;
position: relative;
display: flex;
flex-wrap: wrap;
list-style: none;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 0%;
perspective-origin: 50% 0%;
}
/* Top level list items */
#megadroplinemenu > ul li {
display: inline-block;
text-transform: uppercase;
}
/* right align last two LI elements, Change (2) above to diff number if desired */
#megadroplinemenu > ul li:nth-last-of-type(2) {
margin-left: auto;
border-left: 1px solid #eee;
}
/* Top level menu items link style */
#megadroplinemenu > ul > li a {
display: inline-block;
display: flex;
position: relative;
height: 100%;
/* background of menu items (default state) */
background: white;
color: black;
padding: 14px 10px;
border-right: 1px solid #ddd;
color: #2d2b2b;
text-decoration: none;
}
/* Top level menu items link style on hover and when active */
#megadroplinemenu > ul li:hover > a {
background: #D7F1F2;
}
/* Sub ULs style */
#megadroplinemenu > ul li ul {
position: absolute;
left: -5000px;
top: auto;
opacity: 0;
width: 100%;
transform: rotateX(-70deg);
backface-visibility: hidden;
transform-origin: 50% 0;
background: #eee;
visibility: hidden;
border: 1px solid #ddd;
border-width: 1px 0 1px 1px;
box-shadow: 0 3px 5px #eee;
-webkit-transition: opacity .3s, -webkit- transform .5s, visibility 0s .3s, left 0s .3s;
transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s;
}
/* First Sub Levels UL style on hover */
#megadroplinemenu > ul li:hover > ul {
visibility: visible;
left: 0;
opacity: 1;
transform: rotateX(0deg);
-webkit-transition: opacity .5s, -webkit-transform .5s;
transition: opacity .5s, transform .5s;
}
/* Sub level Menu list items */
#megadroplinemenu > ul li ul li {
display: inline-block;
flex: 1;
min-width: 140px;
/* min width of sub menu LIs */
}
/* Sub Levels link style on hover and when active */
#megadroplinemenu ul ul li:hover > a {
background: #eee;
}
/* Sub Levels UL style on hover */
#megadroplinemenu ul ul li:hover > ul {
left: 0;
}
/* Sub level menu links style */
#megadroplinemenu ul li ul li a {
font: normal 14px 'Bitter', sans-serif;
padding: 10px;
margin: 0;
background: white;
color: black;
display: block;
font-weight: bold;
width: 100%;
height: 100%;
}
/* Sub level List Links Descriptions */
#megadroplinemenu > ul li ul li a div {
text-transform: none;
padding-top: 5px;
font-size: 90%;
color: black;
font-weight: normal;
line-height: 1.5;
}
/* LIs with a sub UL style */
#megadroplinemenu ul li > a {
/* add padding to accomodate arrow inside LIs */
padding-right: 25px;
}
/* LIs with NO sub UL style */
#megadroplinemenu ul li > a:only-child {
/* undo padding for non submenu LIs */
padding-right: 10px;
}
/* Arrow for LIs with sub ULs */
#megadroplinemenu ul li > a:after {
/* add arrow inside LIs */
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
border-top-color: black;
top: 19px;
right: 8px;
}
/* LIs with NO sub UL pseudo class */
/* remove drop down arrow */
#megadroplinemenu ul li > a:only-child:after, #megadroplinemenu ul li.noarrow > a:after {
/* undo arrow for non submenu LIs */
display: none;
}
#megadroplinemenu ul li.noarrow > a {
padding-right: 10px;
}
#searchtoggler input {
width: 100%;
font-weight: bold;
font-size: 36px;
padding: 5px;
}
/* Uneven Line Menu */
div#burgertoggler {
width: 40px;
/* keep width/height ratio to 1.53 if changing dimensions */
height: 26px;
margin-bottom: 2em;
position: absolute;
background: white;
right: 10px;
/* position toggler to the right of page */
top: 10px;
display: flex;
cursor: pointer;
flex-direction: column;
justify-content: space-between;
visibility: hidden;
z-index: 100000;
transition: none;
}
div#burgertoggler > div {
width: 80%;
height: 4px;
background: black;
transform-origin: 0 50%;
}
div#burgertoggler > div.line1 {
width: 80%;
}
div#burgertoggler > div.line2 {
width: 100%;
}
div#burgertoggler.open div.line1 {
transform: rotate(45deg);
}
div#burgertoggler.open div.line2 {
opacity: 0;
transform: translate3d(-10px,0,0);
}
div#burgertoggler.open div.line3 {
transform: rotate(-45deg);
}
/* ####### responsive layout CSS ####### */
@media (max-width: 680px) {
div#burgertoggler {
visibility: visible;
}
div#burgertoggler > div {
transition: all .5s;
}
#megadroplinemenu {
visibility: hidden;
position: fixed;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
transform: scale(.8);
transition: transform .3s, opacity .3s;
}
#megadroplinemenu.open {
visibility: visible;
opacity: 1;
transform: scale(1);
overflow: auto;
transition: transform .3s, opacity .3s;
}
#megadroplinemenu > ul {
display: block;
font-size: 18px;
}
#megadroplinemenu > ul li {
display: block;
}
/* Undo Arrow for LIs with sub ULs */
#megadroplinemenu ul li > a:after {
/* add arrow inside LIs */
display: none;
}
/* Sub ULs style */
#megadroplinemenu > ul li ul {
position: static;
display: block;
background: white;
visibility: visible;
transform: rotateX(-90deg);
}
#megadroplinemenu > ul li ul li {
display: block;
}
#megadroplinemenu.open > ul li ul {
transform: rotateX(0deg);
opacity: 1;
transition: all .3s .3s;
}
#megadroplinemenu > ul > li a {
display: block;
}
/* Sub level menu links style */
#megadroplinemenu ul li ul li a {
height: auto;
padding: 20px;
font-weight: bold;
font-size: 16px;
}
/* Undo Top level menu items link style on hover for touch devices */
html.can-touch #megadroplinemenu > ul li:hover > a {
background: transparent;
}
/* Undo Sub Levels link style on hover and when active for touch devices */
html.can-touch #megadroplinemenu ul ul li:hover > a {
background: transparent;
color: red;
}
#megadroplinemenu ul li ul li a div {
font-weight: normal;
}
}
@media (max-width: 500px) {
/* Sub level menu links style */ #megadroplinemenu ul li ul li a div {
display: none;
}
}
On next page you can check demo version.