D3Public/daux.io
8
0
Fork 0
Code Pull Requests Releases Activity

Built own responsive menu solution to replace bootstraps

Browse Source
This commit is contained in:
Peter McAtominey 2013-07-31 08:17:05 +01:00
parent ab709b924d
commit 5d9a07cdb2
7 changed files with 53 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/daux-blue.css
View File

@ -6508,8 +6508,15 @@ body {
display: block; display: block;
} }
} }
@media (max-width: 480px) { @media (max-width: 768px) {
.sub-nav-collapse {
display: none;
}
}
@media (min-width: 768px) {
.sub-nav-collapse {
display: block;
}
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */

11
css/daux-green.css
View File

@ -6508,8 +6508,15 @@ body {
display: block; display: block;
} }
} }
@media (max-width: 480px) { @media (max-width: 768px) {
.sub-nav-collapse {
display: none;
}
}
@media (min-width: 768px) {
.sub-nav-collapse {
display: block;
}
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */

11
css/daux-navy.css
View File

@ -6508,8 +6508,15 @@ body {
display: block; display: block;
} }
} }
@media (max-width: 480px) { @media (max-width: 768px) {
.sub-nav-collapse {
display: none;
}
}
@media (min-width: 768px) {
.sub-nav-collapse {
display: block;
}
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */

11
css/daux-red.css
View File

@ -6508,8 +6508,15 @@ body {
display: block; display: block;
} }
} }
@media (max-width: 480px) { @media (max-width: 768px) {
.sub-nav-collapse {
display: none;
}
}
@media (min-width: 768px) {
.sub-nav-collapse {
display: block;
}
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */

4
index.php
View File

@ -238,13 +238,13 @@ if ($homepage && $homepage_url !== '/') {
<div class="left-column article-tree span3"> <div class="left-column article-tree span3">
<!-- For Mobile --> <!-- For Mobile -->
<div class="responsive-collapse"> <div class="responsive-collapse">
<button type="button" class="btn btn-sidebar" data-toggle="collapse" data-target="#sub-nav-collapse"> <button type="button" class="btn btn-sidebar" id="menu-spinner-button">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
</div> </div>
<div id="sub-nav-collapse" class="collapse in"> <div id="sub-nav-collapse" class="sub-nav-collapse">
<!-- Navigation --> <!-- Navigation -->
<?php echo build_nav($tree); ?> <?php echo build_nav($tree); ?>

21
js/custom.js
View File

@ -8,16 +8,15 @@ $(function() {
// Bootstrap Table Class // Bootstrap Table Class
$('table').addClass('table'); $('table').addClass('table');
var mobileNavWorkaround = function() { // Responsive menu spinner
if($(window).width()< 768) { $('#menu-spinner-button').click(function() {
$('#sub-nav-collapse').css('height', '0px'); $('#sub-nav-collapse').slideToggle();
} else { });
$('#sub-nav-collapse').css('height', 'auto');
} // Catch browser resize
} $(window).resize(function() {
// Remove transition inline style on large screens
$(window).resize(function() { if ($(window).width() >= 768)
mobileNavWorkaround(); $('#sub-nav-collapse').removeAttr('style');
}); });
mobileNavWorkaround();
}); });

7
less/import/daux-base.less
View File

@ -265,8 +265,11 @@ html, body {
} }
} }
.sub-nav-collapse { .sub-nav-collapse {
@media (max-width: 480px) { @media (max-width: 768px) {
//display: none; display: none;
}
@media (min-width: 768px) {
display: block;
} }
} }