HTML CSS MegaMenu from SharePoint List structure and HTML User Interface
Mega Menu UI:
List structure:
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://plainsmidstream.sharepoint.com/sites/OCC/SiteAssets/fontawesome-free-5.15.3-web/css/all.css">
<style>
/*hide side navigation and center align*/
#s4-workspace {
overflow-x: hidden;
}
#contentBox {
margin-left: 20px;
}
#sideNavBox {
display: none;
margin: 0;
width: 0px;
}
/*----------------------------------------*/
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.menubar {
width: 96%;
position: absolute;
}
.navbar {
overflow: hidden;
background-color: #104E8B;
}
.navbar a {
float: left;
font-size: 14px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: 700;
}
.navbar .dropdown {
font-weight: 700;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
z-index: 1;
padding: 1px 0px;
height: auto;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: calc(100% / 4);
padding: 10px;
text-align: center;
height: 100px;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-position: center;
background-size: 100% 100%;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Create three equal columns that floats next to each other */
.othersectioncolumn {
float: left;
width: calc(100% / 3);
padding: 10px;
text-align: center;
height: 100px;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-position: center;
background-size: 100% 100%;
}
.othersectioncolumn a {
float: none;
color: #fff;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<script src="../SiteAssets/JS/jquery.min.js"></script>
<script>
var megamenudata = [];
$(document).ready(function () {
MegaMenuList();
});
$(".megamenudiv").html("");
function MegaMenuList() {
var urlForAllItems = "/_api/Web/Lists/GetByTitle('MegaMenu')/Items?$select=*,SubheaderTag/Title&$expand=SubheaderTag&$orderby=categoryorder,OrderNumber asc";
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + urlForAllItems,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
megamenudata = data.d.results;
$.each(megamenudata, function (i, n) {
if (n.Category == "SingleHeader") {
$(".megamenudiv").append("<a href='" + n.LinkLocation.Url + "''>" + n.Title + "</a>");
}
if (n.Category == "DropdownHeader") {
var titleVar = n.Title.replace(/\s/g, '');
$(".megamenudiv").append("<div class='dropdown'><div class='dropbtn'>" + n.Title + " <i class='fa fa-caret-down'></i></div><div class='dropdown-content'><div class='fullwidthdiv_" + titleVar + "'></div></div></div>");
}
});
$.each(megamenudata, function (i, n) {
if(n.HeaderType== "Subheader"){
var backgroundimg = n.BackgroundImageLocation?n.BackgroundImageLocation.Url:"../SiteAssets/Images/individual%20page.PNG";
var hyperlink = n.LinkLocation?n.LinkLocation.Url:"";
var subheadertag = n.SubheaderTag?n.SubheaderTag.Title.replace(/\s/g, ''):"";
if(subheadertag!=""){
$(".fullwidthdiv_"+subheadertag).append("<div class='column' style='background-image:url(" + backgroundimg + ")'><a href=" + hyperlink + ">" + n.Title + "</a></div>");
}
}
});
},
error: function (error) {
alert(JSON.stringify(error));
}
});
}
</script>
</head>
<body>
<div class="menubar">
<div class="navbar">
<div class="megamenudiv"></div>
</div>
</div>
<br />
</body>
</html>
Comments
Post a Comment