mirror of
https://github.com/silverstripe/silverstripe-docsviewer
synced 2024-10-22 11:05:56 +02:00
Create sidebar hamburger menu for mobile (#121)
* Create sidebar hamburger menu for mobile * Improve sidebar UX and mobile menu * Fixed sidebar UX bug where blue text breadcrumb didn't appear and fixed hover/focus styling * Improved UX of hamburger by applying toggle animations
This commit is contained in:
Cam Findlay
GitHub
parent
8ae26f1271
commit
e38b740d88
142
css/layout.css
142
css/layout.css
@ -43,7 +43,7 @@ html {
|
||||
}
|
||||
|
||||
#content .box {
|
||||
padding: 30px;
|
||||
padding: 30px 5px;
|
||||
}
|
||||
|
||||
/*! sidebar */
|
||||
@ -72,27 +72,36 @@ html {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#sidebar .nav .current .top {
|
||||
color: #1389CE;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#sidebar .nav a {
|
||||
display:block;
|
||||
padding-top:8px;
|
||||
padding-bottom:8px;
|
||||
padding-top:7px;
|
||||
padding-bottom:7px;
|
||||
padding-right:12px;
|
||||
}
|
||||
|
||||
#sidebar .nav a:hover {
|
||||
text-decoration: none;
|
||||
background:#eee;
|
||||
color:#808c8d;
|
||||
}
|
||||
|
||||
#sidebar .nav a.current:hover {
|
||||
background-color: #03527a;
|
||||
/* Sidebar hover states */
|
||||
#sidebar .nav a:hover,
|
||||
#sidebar .nav a.top:hover,
|
||||
#sidebar .nav .section ul li .section:hover,
|
||||
#sidebar .nav a.current:hover,
|
||||
/* Sidebar focus states */
|
||||
#sidebar .nav a:focus,
|
||||
#sidebar .nav a.top:focus,
|
||||
#sidebar .nav .section ul li .section:focus,
|
||||
#sidebar .nav a.current:focus {
|
||||
background-color: #1389ce;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#sidebar .nav .section .top {
|
||||
background: #f6f7f8;
|
||||
border: none;
|
||||
color: #1389CE;
|
||||
}
|
||||
|
||||
#sidebar li {
|
||||
@ -101,7 +110,6 @@ html {
|
||||
}
|
||||
|
||||
#sidebar li a.current {
|
||||
background:rgb(3, 91, 136);
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
@ -109,7 +117,6 @@ html {
|
||||
|
||||
#sidebar .nav .section ul,
|
||||
#sidebar .nav .current ul {
|
||||
background: #f6f7f8;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
@ -117,16 +124,23 @@ html {
|
||||
|
||||
#sidebar .nav .section ul li a,
|
||||
#sidebar .nav .current ul li a {
|
||||
padding-left:24px;
|
||||
padding-left:30px;
|
||||
}
|
||||
|
||||
#sidebar .nav .section ul li a.section {
|
||||
color: #1389CE;
|
||||
}
|
||||
|
||||
#sidebar .nav .section ul li ul li a,
|
||||
#sidebar .nav .current ul li ul li a {
|
||||
padding-left:42px;
|
||||
padding-left:48px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
#sidebar .nav a.current {}
|
||||
#sidebar .nav a.current {
|
||||
color: #1389CE;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#sidebar .minor-nav a {
|
||||
color: #181C17;
|
||||
@ -207,16 +221,6 @@ html {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
}
|
||||
|
||||
.menu-toggle img {
|
||||
width:32px;
|
||||
}
|
||||
|
||||
/*! language */
|
||||
#language {}
|
||||
|
||||
@ -700,7 +704,7 @@ html {
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
box-shadow: -2px 1px 12px -3px #ccc;
|
||||
box-shadow: -2px 1px 40px -3px #999;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
@ -722,8 +726,88 @@ html {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
.wrapper .menu-toggle {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-bottom: 20px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
-webkit-transition: .5s ease-in-out;
|
||||
-moz-transition: .5s ease-in-out;
|
||||
-o-transition: .5s ease-in-out;
|
||||
transition: .5s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-toggle span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background: #1389ce;
|
||||
border-radius: 9px;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
-webkit-transition: .25s ease-in-out;
|
||||
-moz-transition: .25s ease-in-out;
|
||||
-o-transition: .25s ease-in-out;
|
||||
transition: .25s ease-in-out;
|
||||
}
|
||||
/* Icon 3 */
|
||||
|
||||
.menu-toggle span:nth-child(1) {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.menu-toggle span:nth-child(2),
|
||||
.menu-toggle span:nth-child(3) {
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.menu-toggle span:nth-child(4) {
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
.menu-toggle.open span:nth-child(1) {
|
||||
top: 18px;
|
||||
width: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.menu-toggle.open span:nth-child(2) {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.menu-toggle.open span:nth-child(3) {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.menu-toggle.open span:nth-child(4) {
|
||||
top: 18px;
|
||||
width: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:992px) {
|
||||
#content {
|
||||
float: right;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
/*! links */
|
||||
a {
|
||||
color: #1389ce;
|
||||
color: #808c8d;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
;(function($) {
|
||||
$(document).ready(function() {
|
||||
|
||||
//toggle the side menu when in mobile
|
||||
$('.menu-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var left = $('#sidebar').is('.visible') ? -270 : 0;
|
||||
$('#sidebar').animate({ left: left}, 'fast', function() {
|
||||
$(this).toggleClass('visible');
|
||||
});
|
||||
$(this).toggleClass('open');
|
||||
})
|
||||
|
||||
var switched = false;
|
||||
|
||||
var updateTables = function() {
|
||||
@ -135,60 +146,7 @@
|
||||
$(this).removeClass('hover');
|
||||
});
|
||||
|
||||
/*
|
||||
$(".search input").live("keyup", function(e) {
|
||||
clearTimeout($.data(this, 'timer'));
|
||||
|
||||
var string = $(this).val();
|
||||
var self = $(this);
|
||||
|
||||
if (string == '') {
|
||||
$(".search .autocomplete-results").hide();
|
||||
} else {
|
||||
var container;
|
||||
|
||||
if($(this).siblings('.autocomplete-results').length == 0) {
|
||||
container = $("<div class='autocomplete-results'></div");
|
||||
|
||||
$(this).after(container);
|
||||
} else {
|
||||
container = $(this).siblings('.autocomplete-results').first();
|
||||
}
|
||||
|
||||
$(this).data('timer', setTimeout(function() {
|
||||
if(string !== '') {
|
||||
$.getJSON(
|
||||
self.parents('form').attr('action'),
|
||||
{ query: string },
|
||||
function(results) {
|
||||
if(results) {
|
||||
var list = $("<ul></ul>");
|
||||
|
||||
$.each(results, function(i, elem) {
|
||||
list.append(
|
||||
$("<li></li>")
|
||||
.append(
|
||||
$("<a></a>").attr('href', elem.link).text(elem.title)
|
||||
).append(
|
||||
elem.path
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
container.append(list);
|
||||
} else {
|
||||
container.hide().removeClass('loading');
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return false;
|
||||
}, 100));
|
||||
};
|
||||
|
||||
});
|
||||
*/
|
||||
|
||||
/** ---------------------------------------------
|
||||
* LANGAUGE SELECTER
|
||||
@ -218,13 +176,6 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('.menu-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var left = $('#sidebar').is('.visible') ? -270 : 0;
|
||||
$('#sidebar').animate({ left: left}, 'fast', function() {
|
||||
$(this).toggleClass('visible');
|
||||
});
|
||||
})
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
@ -5,6 +5,13 @@
|
||||
|
||||
<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
|
||||
<div class="wrapper">
|
||||
<a class="menu-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<% if Breadcrumbs.count > 1 %>
|
||||
<% include DocumentationBreadcrumbs %>
|
||||
<% else_if Page.Title %>
|
||||
|
||||
@ -8,7 +8,12 @@
|
||||
|
||||
<div class="doc-breadcrumbs">
|
||||
<p>
|
||||
<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
|
||||
<a class="menu-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
<a class="breadcrumb" href="$BaseHref">Documentation</a>
|
||||
<span>/</span>
|
||||
<a class="breadcrumb current">Index</a>
|
||||
|
||||
@ -8,7 +8,12 @@
|
||||
|
||||
<div class="doc-breadcrumbs">
|
||||
<p>
|
||||
<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
|
||||
<a class="menu-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
<a class="breadcrumb" href="$BaseHref">Documentation</a>
|
||||
<span>/</span>
|
||||
<a class="breadcrumb current">Search</a>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<div class="doc-breadcrumbs">
|
||||
<p>
|
||||
<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
|
||||
<% loop Breadcrumbs %>
|
||||
<% if not First %>
|
||||
<a class="breadcrumb <% if Last %>current<% end_if %>" href="$Link">$Title</a> <% if Last %><% else %><span>/</span><% end_if %>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<div id="sidebar">
|
||||
<div class="box">
|
||||
$DocumentationSearchForm
|
||||
|
||||
<ul class="nav">
|
||||
<% if not HasDefaultEntity %>
|
||||
<li><a href="$Link" class="top">Home</a></li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user