Skip to content
This repository was archived by the owner on Feb 1, 2018. It is now read-only.

Commit 45acecd

Browse files
farhan687farhan687
committed
Mega menu is added
1 parent 2aea89a commit 45acecd

7 files changed

Lines changed: 219 additions & 5 deletions

File tree

‎dist/css/main.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/main.js‎

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -506,6 +506,9 @@
506506
$scope.logoSrc = Docbase.options.logoSrc;
507507
$scope.docbaseOptions = Docbase.options;
508508

509+
setTimeout(function(){
510+
$('#folder-navbar').megaMenu();
511+
},200);
509512

510513
function versionIn(folder) {
511514
if (folder.name === data.currentFolder) {
@@ -593,7 +596,11 @@
593596
$scope.map = Docbase.map;
594597
$scope.versions = Object.keys($scope.map);
595598
$scope.currentVersion = $scope.docbaseOptions.default_version && $scope.docbaseOptions.default_version !== null ? $scope.docbaseOptions.default_version: $scope.versions[0];
596-
599+
600+
setTimeout(function(){
601+
$('#folder-navbar').megaMenu();
602+
},200);
603+
597604
});
598605
};
599606
if (Docbase.map) {
@@ -624,6 +631,9 @@
624631
$scope.map = Docbase.map;
625632
$scope.versions = Object.keys($scope.map);
626633
$scope.currentVersion = $route.current.params.version;
634+
setTimeout(function(){
635+
$('#folder-navbar').megaMenu();
636+
},200);
627637
});
628638
};
629639
if (Docbase.map) {
@@ -1105,6 +1115,65 @@
11051115
};
11061116
})(this);
11071117

1118+
// FILE: scripts/megaMenu.js
1119+
(function($) {
1120+
$.fn.megaMenu = function() {
1121+
var width_array = [];
1122+
var current_folder_width = $('.folder-li').width();
1123+
$('.folder-li li.dropdown').each(function(key, val) {
1124+
width_array.push($(val).outerWidth());
1125+
});
1126+
1127+
function menu_set() {
1128+
var default_width = 150;
1129+
var total_width = $(window).width();
1130+
var logo_width = $('.navbar-header').width();
1131+
var other_nav_width = $('#other-navs').width();
1132+
var search_form_width = $('.search-form').width();
1133+
var category_width = $('.category-li').width();
1134+
var rest_width = total_width - (logo_width + other_nav_width + search_form_width);
1135+
var folder_width = rest_width - category_width;
1136+
var available_folder = 0;
1137+
if (current_folder_width > folder_width) {
1138+
var temp_folder_total = 0;
1139+
var stopFlag = false;
1140+
available_folder = 0;
1141+
width_array.forEach(function(width, k) {
1142+
if (!stopFlag) {
1143+
temp_folder_total += width;
1144+
if (temp_folder_total >= folder_width) {
1145+
available_folder = k - 1;
1146+
stopFlag = true;
1147+
}
1148+
}
1149+
});
1150+
//available_folder = Math.floor(folder_width/default_width);
1151+
$('.folder-li li.dropdown').each(function(key, val) {
1152+
if (key <= available_folder) {
1153+
$(val).show();
1154+
} else {
1155+
$(val).hide();
1156+
}
1157+
});
1158+
$('.category-li').show();
1159+
$('.megamenu .megamenu-item').each(function(key, val) {
1160+
if (key <= available_folder) {
1161+
$(val).hide();
1162+
} else {
1163+
$(val).show();
1164+
}
1165+
});
1166+
1167+
} else {
1168+
$('.folder-li li.dropdown').show();
1169+
$('.category-li').hide();
1170+
}
1171+
}
1172+
menu_set();
1173+
$(window).resize(menu_set);
1174+
};
1175+
}(jQuery));
1176+
11081177
// FILE: scripts/searchAppbase.js
11091178
(function($) {
11101179
$.fn.searchAppbase = function(searchIndexUrl, htmlMode) {

‎dist/js/main.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/main.unique.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/docbase.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -479,6 +479,9 @@
479479
$scope.logoSrc = Docbase.options.logoSrc;
480480
$scope.docbaseOptions = Docbase.options;
481481

482+
setTimeout(function(){
483+
$('#folder-navbar').megaMenu();
484+
},200);
482485

483486
function versionIn(folder) {
484487
if (folder.name === data.currentFolder) {
@@ -566,7 +569,11 @@
566569
$scope.map = Docbase.map;
567570
$scope.versions = Object.keys($scope.map);
568571
$scope.currentVersion = $scope.docbaseOptions.default_version && $scope.docbaseOptions.default_version !== null ? $scope.docbaseOptions.default_version: $scope.versions[0];
569-
572+
573+
setTimeout(function(){
574+
$('#folder-navbar').megaMenu();
575+
},200);
576+
570577
});
571578
};
572579
if (Docbase.map) {
@@ -597,6 +604,9 @@
597604
$scope.map = Docbase.map;
598605
$scope.versions = Object.keys($scope.map);
599606
$scope.currentVersion = $route.current.params.version;
607+
setTimeout(function(){
608+
$('#folder-navbar').megaMenu();
609+
},200);
600610
});
601611
};
602612
if (Docbase.map) {

‎scripts/megaMenu.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
(function($) {
2+
$.fn.megaMenu = function() {
3+
var width_array = [];
4+
var current_folder_width = $('.folder-li').width();
5+
$('.folder-li li.dropdown').each(function(key, val) {
6+
width_array.push($(val).outerWidth());
7+
});
8+
9+
function menu_set() {
10+
var default_width = 150;
11+
var total_width = $(window).width();
12+
var logo_width = $('.navbar-header').width();
13+
var other_nav_width = $('#other-navs').width();
14+
var search_form_width = $('.search-form').width();
15+
var category_width = $('.category-li').width();
16+
var rest_width = total_width - (logo_width + other_nav_width + search_form_width);
17+
var folder_width = rest_width - category_width;
18+
var available_folder = 0;
19+
if (current_folder_width > folder_width) {
20+
var temp_folder_total = 0;
21+
var stopFlag = false;
22+
available_folder = 0;
23+
width_array.forEach(function(width, k) {
24+
if (!stopFlag) {
25+
temp_folder_total += width;
26+
if (temp_folder_total >= folder_width) {
27+
available_folder = k - 1;
28+
stopFlag = true;
29+
}
30+
}
31+
});
32+
//available_folder = Math.floor(folder_width/default_width);
33+
$('.folder-li li.dropdown').each(function(key, val) {
34+
if (key <= available_folder) {
35+
$(val).show();
36+
} else {
37+
$(val).hide();
38+
}
39+
});
40+
$('.category-li').show();
41+
$('.megamenu .megamenu-item').each(function(key, val) {
42+
if (key <= available_folder) {
43+
$(val).hide();
44+
} else {
45+
$(val).show();
46+
}
47+
});
48+
49+
} else {
50+
$('.folder-li li.dropdown').show();
51+
$('.category-li').hide();
52+
}
53+
}
54+
menu_set();
55+
$(window).resize(menu_set);
56+
};
57+
}(jQuery));

‎styles/main.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -358,4 +358,82 @@ li.L1,li.L3,li.L5,li.L7,li.L9 { }
358358
width: 100%;
359359
height: 100%;
360360
z-index: 2;
361+
}
362+
363+
/*Megamenu style*/
364+
.menu-large {
365+
position: static !important;
366+
}
367+
.megamenu{
368+
padding: 20px 0px;
369+
width:100%;
370+
}
371+
.megamenu> li > ul {
372+
padding: 0;
373+
margin: 0;
374+
}
375+
.megamenu> li > ul > li {
376+
list-style: none;
377+
}
378+
.megamenu> li > ul > li > a {
379+
display: block;
380+
padding: 3px 20px;
381+
clear: both;
382+
font-weight: normal;
383+
line-height: 1.428571429;
384+
color: #333333;
385+
white-space: normal;
386+
}
387+
.megamenu> li ul > li > a:hover,
388+
.megamenu> li ul > li > a:focus {
389+
text-decoration: none;
390+
color: #262626;
391+
background-color: #f5f5f5;
392+
}
393+
.megamenu.disabled > a,
394+
.megamenu.disabled > a:hover,
395+
.megamenu.disabled > a:focus {
396+
color: #999999;
397+
}
398+
.megamenu.disabled > a:hover,
399+
.megamenu.disabled > a:focus {
400+
text-decoration: none;
401+
background-color: transparent;
402+
background-image: none;
403+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
404+
cursor: not-allowed;
405+
}
406+
.megamenu.dropdown-header {
407+
color: #428bca;
408+
font-size: 18px;
409+
}
410+
.folder-li li.dropdown a {
411+
max-width: 150px;
412+
overflow: hidden;
413+
}
414+
.dropdown-header {
415+
padding: 0;
416+
}
417+
.megamenu> li > ul > li.dropdown-header > a {
418+
font-size: 16px;
419+
border-bottom: 1px solid #ccc;
420+
}
421+
@media (max-width: 768px) {
422+
.megamenu{
423+
margin-left: 0 ;
424+
margin-right: 0 ;
425+
}
426+
.megamenu> li {
427+
margin-bottom: 30px;
428+
}
429+
.megamenu> li:last-child {
430+
margin-bottom: 0;
431+
}
432+
.megamenu.dropdown-header {
433+
padding: 3px 15px !important;
434+
435+
}
436+
.navbar-nav .open .dropdown-menu .dropdown-header{
437+
color:#fff;
438+
}
361439
}

0 commit comments

Comments
 (0)