重构页面：移除sidebar id元素，重写适配样式表
This commit is contained in:
Argo-MacBookPro
parent
47179951fd
commit
0178738d07
|
|
@ -1,13 +1,11 @@
|
|||
@model NavigatorBarModel
|
||||
<aside>
|
||||
<div id="sidebar" class="sidebar">
|
||||
<!-- sidebar menu start-->
|
||||
<ul class="sidebar-menu">
|
||||
@foreach (var menu in Model.Navigations)
|
||||
{
|
||||
@await Html.PartialAsync("SubMenu", menu)
|
||||
}
|
||||
</ul>
|
||||
<!-- sidebar menu end-->
|
||||
</div>
|
||||
<!-- sidebar menu start-->
|
||||
<ul class="sidebar nav nav-pills flex-column flex-nowrap">
|
||||
@foreach (var menu in Model.Navigations)
|
||||
{
|
||||
@await Html.PartialAsync("SubNavItem", menu)
|
||||
}
|
||||
</ul>
|
||||
<!-- sidebar menu end-->
|
||||
</aside>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@model Bootstrap.Security.BootstrapMenu
|
||||
<li class="sub-menu">
|
||||
<a href="@Url.Content(Model.Url)" class="@Model.Active" target="@Model.Target"><i class="@Model.Icon"></i>@Model.Name</a>
|
||||
@if (Model.Menus.Count() > 0)
|
||||
{
|
||||
@await Html.PartialAsync("SubNavigation", Model.Menus)
|
||||
}
|
||||
</li>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
@model Bootstrap.Security.BootstrapMenu
|
||||
<li class="nav-item @Model.Active">
|
||||
<a href="@Url.Content(Model.Url)" class="nav-link @Model.Active" target="@Model.Target"><i class="@Model.Icon"></i>@Model.Name</a>
|
||||
@if (Model.Menus.Count() > 0)
|
||||
{
|
||||
@await Html.PartialAsync("SubNavigation", Model.Menus)
|
||||
}
|
||||
</li>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
@model IEnumerable<Bootstrap.Security.BootstrapMenu>
|
||||
<ul class="sub" style="display: none;">
|
||||
<ul class="sub nav nav-pills flex-column flex-nowrap" style="display: none;">
|
||||
@foreach (var menu in Model)
|
||||
{
|
||||
@await Html.PartialAsync("SubMenu", menu)
|
||||
@await Html.PartialAsync("SubNavItem", menu)
|
||||
}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -17,12 +17,10 @@
|
|||
@section javascript {
|
||||
<environment include="Development">
|
||||
<script src="~/js/sweetalert.js" asp-append-version="true"></script>
|
||||
<script src="~/js/jquery.scrollTo.js" asp-append-version="true"></script>
|
||||
<script src="~/js/jquery.nicescroll.js" asp-append-version="true"></script>
|
||||
</environment>
|
||||
<environment exclude="Development">
|
||||
<script src="~/js/sweetalert.min.js" asp-append-version="true"></script>
|
||||
<script src="~/js/jquery.scrollTo.min.js" asp-append-version="true"></script>
|
||||
<script src="~/js/jquery.nicescroll.min.js" asp-append-version="true"></script>
|
||||
</environment>
|
||||
<script src="~/js/jquery.dcjqaccordion.2.7.js" asp-append-version="true"></script>
|
||||
|
|
|
|||
|
|
@ -16,24 +16,17 @@
|
|||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-open .main-content {
|
||||
margin-left: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 210px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.main-content.open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 672px) {
|
||||
.main-content {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.main-content.open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,25 +13,19 @@
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sidebar-open .main-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
transition: all .4s ease-in-out;
|
||||
padding: 15px 15px 0 15px;
|
||||
margin-left: 0;
|
||||
height: auto;
|
||||
left: 0;
|
||||
bottom: 40px;
|
||||
right: 0;
|
||||
top: 98px;
|
||||
}
|
||||
|
||||
.main-content.open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content.closed {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main-content > .panel:last-child .panel-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,73 +22,37 @@
|
|||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-toggle-box {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
top: 98px;
|
||||
bottom: 40px;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
.sidebar-open aside {
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: none;
|
||||
.header .nav {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.header .nav {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.header, .site-footer {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.sidebar {
|
||||
display: block;
|
||||
width: 210px;
|
||||
.sidebar-open aside {
|
||||
transform: translate(-100%);
|
||||
}
|
||||
|
||||
.sidebar-open .site-footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
aside {
|
||||
transition: none;
|
||||
transform: none;
|
||||
top: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 672px) {
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header, .site-footer {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
top: 98px;
|
||||
bottom: 40px;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
aside {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.aside.open {
|
||||
transform: translate(0);
|
||||
width: 210px;
|
||||
overflow: auto;
|
||||
bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,14 @@ body {
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.sidebar-open aside {
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.sidebar-open .site-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
aside {
|
||||
transition: transform .4s ease-in-out;
|
||||
transform: translate(-100%);
|
||||
|
|
@ -18,94 +26,69 @@ aside {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: auto;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
aside.open {
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
height: 100%;
|
||||
z-index: 4;
|
||||
background: #2a3542;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
.sidebar {
|
||||
padding: 20px 0;
|
||||
margin-bottom: 0;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.sidebar-menu .dcjq-icon {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
display: inline-block;
|
||||
background: url(../images/nav-expand.png) no-repeat;
|
||||
float: right;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.sidebar-menu .active .dcjq-icon {
|
||||
background-position: bottom;
|
||||
}
|
||||
|
||||
.sidebar-menu li {
|
||||
.sidebar .nav-item {
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
.sidebar-menu li a {
|
||||
color: #aeb2b7;
|
||||
display: block;
|
||||
padding: 15px 10px;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 4px;
|
||||
.sidebar .nav-item .nav-link:hover, .sidebar .nav-item .nav-link:focus {
|
||||
background: #35404d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-menu li a:hover, .sidebar-menu li a:focus {
|
||||
background: #35404d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-menu li a.active {
|
||||
color: #FF6C60;
|
||||
}
|
||||
|
||||
.sidebar-menu li a i {
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.sidebar-menu li .sub {
|
||||
padding-left: 0;
|
||||
.sidebar .nav-item.active > .nav-link {
|
||||
color: #FF6C60;
|
||||
}
|
||||
|
||||
.sidebar-menu li .sub li a:hover, .sidebar-menu li .sub li.active a {
|
||||
color: #FF6C60;
|
||||
transition: all 0.3s ease;
|
||||
display: block;
|
||||
.sidebar .nav-link {
|
||||
color: #aeb2b7;
|
||||
padding: 15px 10px;
|
||||
transition: all .3s linear;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar .nav-link .dcjq-icon {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
background: url(../images/nav-expand.png) no-repeat;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sidebar .nav-link i {
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active, .sidebar .nav-link.active + .sub,
|
||||
.sidebar .sub .sub .nav-item .nav-link:hover, .sidebar .sub .sub .nav-item .nav-link:focus {
|
||||
background: #35404D;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active .dcjq-icon {
|
||||
background-position: bottom;
|
||||
}
|
||||
|
||||
.sidebar-menu li .sub li {
|
||||
background: #35404D;
|
||||
margin: 0;
|
||||
padding: 0 10px 0 32px;
|
||||
}
|
||||
.sidebar .sub .nav-item.dcjq-parent-li {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sidebar-menu li .sub li:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.sidebar .sub .nav-item.dcjq-parent-li .nav-link {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.sidebar-menu li .sub li a {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
.sidebar .sub .dcjq-parent-li .nav-link.active, .sidebar .sub .dcjq-parent-li .nav-link.active + .sub,
|
||||
.sidebar .sub .nav-item .nav-link:hover, .sidebar .sub .nav-item .nav-link:focus {
|
||||
background: #3a4756;
|
||||
}
|
||||
|
||||
.modal-body .dd {
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -316,7 +299,7 @@ a, a:hover, a:focus {
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -133,18 +133,12 @@ $(function () {
|
|||
"hideMethod": "fadeOut"
|
||||
};
|
||||
|
||||
var $sidebar = $("#sidebar");
|
||||
var $sideMenu = $sidebar.find('.sidebar-menu');
|
||||
var $main = $('#main-content');
|
||||
var $breadNav = $('#breadNav');
|
||||
var $sideMenu = $(".sidebar");
|
||||
|
||||
$sideMenu.dcAccordion({
|
||||
autoExpand: true
|
||||
});
|
||||
|
||||
// custom scrollbar
|
||||
if (!$.browser.versions.ios) $("#sidebar").niceScroll({ cursorcolor: "#e8403f", cursorwidth: '3px', background: '#2a3542', spacebarenabled: false, cursorborder: '' });
|
||||
|
||||
$("#gotoTop").on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('#main-content, .content-body, body').animate({
|
||||
|
|
@ -153,38 +147,52 @@ $(function () {
|
|||
});
|
||||
|
||||
// breadcrumb
|
||||
var $breadNav = $('#breadNav');
|
||||
var arch = $sideMenu.find('a.active').last();
|
||||
if (arch.text() !== "") $breadNav.removeClass('d-none').text(arch.text());
|
||||
|
||||
// sidebar scroll animate
|
||||
var top = (arch.offset() || { top: 0 }).top;
|
||||
if (top > 0) {
|
||||
var middle = $('header').outerHeight() + $sidebar.outerHeight() / 2;
|
||||
if (top > middle) $sidebar.animate({ scrollTop: top + arch.outerHeight() / 2 - middle }, 500);
|
||||
}
|
||||
$.fn.extend({
|
||||
autoScrollSidebar: function (options) {
|
||||
var $this = this;
|
||||
var option = $.extend({ target: null, offsetTop: 0 }, options);
|
||||
var navItem = option.target;
|
||||
var top = navItem.offset().top + $this.scrollTop() - $('header').outerHeight() + option.offsetTop;
|
||||
|
||||
$sidebar.on('click', 'a.dcjq-parent', function () {
|
||||
var o = $(this).offset();
|
||||
diff = 110 - o.top;
|
||||
if (diff > 0)
|
||||
$sidebar.scrollTo("-=" + Math.abs(diff), 500);
|
||||
else
|
||||
$sidebar.scrollTo("+=" + Math.abs(diff), 500);
|
||||
// sidebar scroll animate
|
||||
var middle = $this.outerHeight() / 2;
|
||||
if (top > middle) $this.animate({ scrollTop: top - middle }, 500, function () {
|
||||
$this.resizeNiceScroll();
|
||||
});
|
||||
return this;
|
||||
},
|
||||
resizeNiceScroll: function () {
|
||||
if (!$.browser.versions.ios) this.getNiceScroll().resize();
|
||||
return this;
|
||||
},
|
||||
addNiceScroll: function () {
|
||||
if (!$.browser.versions.ios) {
|
||||
var nice = this.data('__nicescroll') || false;
|
||||
if (!nice) this.niceScroll({ cursorcolor: "#e8403f", cursorwidth: '3px', background: '#2a3542', spacebarenabled: false, cursorborder: '' });
|
||||
}
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
// resize nicscroll
|
||||
$sidebar.getNiceScroll().resize();
|
||||
// custom scrollbar
|
||||
var $sidebar = $('aside').addNiceScroll();
|
||||
$sidebar.autoScrollSidebar({ target: arch.parent(), offsetTop: arch.parent().innerHeight() / 2 });
|
||||
|
||||
$sideMenu.on('click', 'a.dcjq-parent', function () {
|
||||
var $this = $(this);
|
||||
if (!$this.hasClass('active')) {
|
||||
setTimeout(function () { $sidebar.resizeNiceScroll(); }, 500);
|
||||
return;
|
||||
}
|
||||
$sidebar.autoScrollSidebar({ target: $(this).parent(), offsetTop: 25.5 });
|
||||
});
|
||||
|
||||
$('.sidebar-toggle-box').on('click', function () {
|
||||
if ($sidebar.is(":visible")) {
|
||||
$main.addClass('closed').removeClass('open');
|
||||
$sidebar.parent().toggleClass('open');
|
||||
$(window).width() <= 768 ? setTimeout(function () { $sidebar.hide(); }, 400) : $sidebar.hide();
|
||||
} else {
|
||||
$sidebar.show();
|
||||
$sidebar.parent().toggleClass('open');
|
||||
$(window).width() <= 768 ? setTimeout(function () { $main.addClass('open').removeClass('closed'); }, 400) : $main.addClass('open').removeClass('closed');
|
||||
}
|
||||
$('body').toggleClass('sidebar-open');
|
||||
});
|
||||
|
||||
$('[data-toggle="dropdown"].dropdown-select').dropdown('select');
|
||||
|
|
@ -214,4 +222,13 @@ $(function () {
|
|||
if (result.length > 0) this.reloadWidget();
|
||||
}
|
||||
});
|
||||
|
||||
$(window).on('resize', function () {
|
||||
if ($(window).width() > 768) {
|
||||
$sidebar.addNiceScroll();
|
||||
}
|
||||
else {
|
||||
$sidebar.removeAttr('style').getNiceScroll().remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1,210 +0,0 @@
|
|||
/*!
|
||||
* jQuery.scrollTo
|
||||
* Copyright (c) 2007-2015 Ariel Flesler - aflesler ○ gmail • com | http://flesler.blogspot.com
|
||||
* Licensed under MIT
|
||||
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
|
||||
* @projectDescription Lightweight, cross-browser and highly customizable animated scrolling with jQuery
|
||||
* @author Ariel Flesler
|
||||
* @version 2.1.2
|
||||
*/
|
||||
; (function (factory) {
|
||||
'use strict';
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module !== 'undefined' && module.exports) {
|
||||
// CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Global
|
||||
factory(jQuery);
|
||||
}
|
||||
})(function ($) {
|
||||
'use strict';
|
||||
|
||||
var $scrollTo = $.scrollTo = function (target, duration, settings) {
|
||||
return $(window).scrollTo(target, duration, settings);
|
||||
};
|
||||
|
||||
$scrollTo.defaults = {
|
||||
axis: 'xy',
|
||||
duration: 0,
|
||||
limit: true
|
||||
};
|
||||
|
||||
function isWin(elem) {
|
||||
return !elem.nodeName ||
|
||||
$.inArray(elem.nodeName.toLowerCase(), ['iframe', '#document', 'html', 'body']) !== -1;
|
||||
}
|
||||
|
||||
$.fn.scrollTo = function (target, duration, settings) {
|
||||
if (typeof duration === 'object') {
|
||||
settings = duration;
|
||||
duration = 0;
|
||||
}
|
||||
if (typeof settings === 'function') {
|
||||
settings = { onAfter: settings };
|
||||
}
|
||||
if (target === 'max') {
|
||||
target = 9e9;
|
||||
}
|
||||
|
||||
settings = $.extend({}, $scrollTo.defaults, settings);
|
||||
// Speed is still recognized for backwards compatibility
|
||||
duration = duration || settings.duration;
|
||||
// Make sure the settings are given right
|
||||
var queue = settings.queue && settings.axis.length > 1;
|
||||
if (queue) {
|
||||
// Let's keep the overall duration
|
||||
duration /= 2;
|
||||
}
|
||||
settings.offset = both(settings.offset);
|
||||
settings.over = both(settings.over);
|
||||
|
||||
return this.each(function () {
|
||||
// Null target yields nothing, just like jQuery does
|
||||
if (target === null) return;
|
||||
|
||||
var win = isWin(this),
|
||||
elem = win ? this.contentWindow || window : this,
|
||||
$elem = $(elem),
|
||||
targ = target,
|
||||
attr = {},
|
||||
toff;
|
||||
|
||||
switch (typeof targ) {
|
||||
// A number will pass the regex
|
||||
case 'number':
|
||||
case 'string':
|
||||
if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
|
||||
targ = both(targ);
|
||||
// We are done
|
||||
break;
|
||||
}
|
||||
// Relative/Absolute selector
|
||||
targ = win ? $(targ) : $(targ, elem);
|
||||
/* falls through */
|
||||
case 'object':
|
||||
if (targ.length === 0) return;
|
||||
// DOMElement / jQuery
|
||||
if (targ.is || targ.style) {
|
||||
// Get the real position of the target
|
||||
toff = (targ = $(targ)).offset();
|
||||
}
|
||||
}
|
||||
|
||||
var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset;
|
||||
|
||||
$.each(settings.axis.split(''), function (i, axis) {
|
||||
var Pos = axis === 'x' ? 'Left' : 'Top',
|
||||
pos = Pos.toLowerCase(),
|
||||
key = 'scroll' + Pos,
|
||||
prev = $elem[key](),
|
||||
max = $scrollTo.max(elem, axis);
|
||||
|
||||
if (toff) {// jQuery / DOMElement
|
||||
attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]);
|
||||
|
||||
// If it's a dom element, reduce the margin
|
||||
if (settings.margin) {
|
||||
attr[key] -= parseInt(targ.css('margin' + Pos), 10) || 0;
|
||||
attr[key] -= parseInt(targ.css('border' + Pos + 'Width'), 10) || 0;
|
||||
}
|
||||
|
||||
attr[key] += offset[pos] || 0;
|
||||
|
||||
if (settings.over[pos]) {
|
||||
// Scroll to a fraction of its width/height
|
||||
attr[key] += targ[axis === 'x' ? 'width' : 'height']() * settings.over[pos];
|
||||
}
|
||||
} else {
|
||||
var val = targ[pos];
|
||||
// Handle percentage values
|
||||
attr[key] = val.slice && val.slice(-1) === '%' ?
|
||||
parseFloat(val) / 100 * max
|
||||
: val;
|
||||
}
|
||||
|
||||
// Number or 'number'
|
||||
if (settings.limit && /^\d+$/.test(attr[key])) {
|
||||
// Check the limits
|
||||
attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max);
|
||||
}
|
||||
|
||||
// Don't waste time animating, if there's no need.
|
||||
if (!i && settings.axis.length > 1) {
|
||||
if (prev === attr[key]) {
|
||||
// No animation needed
|
||||
attr = {};
|
||||
} else if (queue) {
|
||||
// Intermediate animation
|
||||
animate(settings.onAfterFirst);
|
||||
// Don't animate this axis again in the next iteration.
|
||||
attr = {};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
animate(settings.onAfter);
|
||||
|
||||
function animate(callback) {
|
||||
var opts = $.extend({}, settings, {
|
||||
// The queue setting conflicts with animate()
|
||||
// Force it to always be true
|
||||
queue: true,
|
||||
duration: duration,
|
||||
complete: callback && function () {
|
||||
callback.call(elem, targ, settings);
|
||||
}
|
||||
});
|
||||
$elem.animate(attr, opts);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Max scrolling position, works on quirks mode
|
||||
// It only fails (not too badly) on IE, quirks mode.
|
||||
$scrollTo.max = function (elem, axis) {
|
||||
var Dim = axis === 'x' ? 'Width' : 'Height',
|
||||
scroll = 'scroll' + Dim;
|
||||
|
||||
if (!isWin(elem))
|
||||
return elem[scroll] - $(elem)[Dim.toLowerCase()]();
|
||||
|
||||
var size = 'client' + Dim,
|
||||
doc = elem.ownerDocument || elem.document,
|
||||
html = doc.documentElement,
|
||||
body = doc.body;
|
||||
|
||||
return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]);
|
||||
};
|
||||
|
||||
function both(val) {
|
||||
return $.isFunction(val) || $.isPlainObject(val) ? val : { top: val, left: val };
|
||||
}
|
||||
|
||||
// Add special hooks so that window scroll properties can be animated
|
||||
$.Tween.propHooks.scrollLeft =
|
||||
$.Tween.propHooks.scrollTop = {
|
||||
get: function (t) {
|
||||
return $(t.elem)[t.prop]();
|
||||
},
|
||||
set: function (t) {
|
||||
var curr = this.get(t);
|
||||
// If interrupt is true and user scrolled, stop animating
|
||||
if (t.options.interrupt && t._last && t._last !== curr) {
|
||||
return $(t.elem).stop();
|
||||
}
|
||||
var next = Math.round(t.now);
|
||||
// Don't waste CPU
|
||||
// Browsers don't render floating point scroll
|
||||
if (curr !== next) {
|
||||
$(t.elem)[t.prop](next);
|
||||
t._last = this.get(t);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// AMD requirement
|
||||
return $scrollTo;
|
||||
});
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2007-2013 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
|
||||
* Dual licensed under MIT and GPL.
|
||||
* @author Ariel Flesler
|
||||
* @version 1.4.6
|
||||
*/
|
||||
;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,targ,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
@model NavigatorBarModel
|
||||
<aside>
|
||||
<div id="sidebar" class="sidebar">
|
||||
<!-- sidebar menu start-->
|
||||
<ul class="sidebar-menu">
|
||||
@foreach (var menu in Model.Navigations)
|
||||
{
|
||||
@await Html.PartialAsync("SubMenu", menu)
|
||||
}
|
||||
</ul>
|
||||
<!-- sidebar menu end-->
|
||||
</div>
|
||||
<!-- sidebar menu start-->
|
||||
<ul class="sidebar">
|
||||
@foreach (var menu in Model.Navigations)
|
||||
{
|
||||
@await Html.PartialAsync("SubMenu", menu)
|
||||
}
|
||||
</ul>
|
||||
<!-- sidebar menu end-->
|
||||
</aside>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@model Bootstrap.Security.BootstrapMenu
|
||||
<li class="sub-menu">
|
||||
<li>
|
||||
<a href="@Url.Content(Model.Url)" class="@Model.Active" target="@Model.Target"><i class="@Model.Icon"></i>@Model.Name</a>
|
||||
@if (Model.Menus.Count() > 0)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -35,22 +35,11 @@
|
|||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
position: fixed;
|
||||
.sidebar-open aside {
|
||||
transform: translate(-100%);
|
||||
}
|
||||
|
||||
aside {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 672px) {
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
position: fixed;
|
||||
.sidebar-open .site-footer {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,14 @@ body {
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.sidebar-open aside {
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.sidebar-open .site-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
aside {
|
||||
transition: transform .4s ease-in-out;
|
||||
transform: translate(-100%);
|
||||
|
|
@ -18,31 +26,25 @@ aside {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: auto;
|
||||
z-index: 5;
|
||||
z-index: 4;
|
||||
background: #2a3542;
|
||||
}
|
||||
|
||||
aside.open {
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
height: 100%;
|
||||
background: #2a3542;
|
||||
background-image: url('../images/bird.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 96% 98%;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
padding: 20px 0;
|
||||
margin-bottom: 0;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.sidebar-menu .dcjq-icon {
|
||||
.sidebar .dcjq-parent-li, .sidebar li a.active, .sidebar li a.active + .sub {
|
||||
background: #35404D;
|
||||
}
|
||||
|
||||
.sidebar .sub .dcjq-parent-li, .sidebar .sub li a.active, .sidebar .sub li a.active + .sub {
|
||||
background: #3a4756;
|
||||
}
|
||||
|
||||
.sidebar .dcjq-icon {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
display: inline-block;
|
||||
|
|
@ -51,15 +53,15 @@ aside {
|
|||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.sidebar-menu .active .dcjq-icon {
|
||||
.sidebar .active .dcjq-icon {
|
||||
background-position: bottom;
|
||||
}
|
||||
|
||||
.sidebar-menu li {
|
||||
.sidebar li {
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
.sidebar-menu li a {
|
||||
.sidebar li a {
|
||||
color: #aeb2b7;
|
||||
display: block;
|
||||
padding: 15px 10px;
|
||||
|
|
@ -67,43 +69,46 @@ aside {
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sidebar-menu li a:hover, .sidebar-menu li a:focus {
|
||||
.sidebar li a:hover, .sidebar li a:focus {
|
||||
background: #35404d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-menu li a.active {
|
||||
.sidebar li a.active {
|
||||
color: #FF6C60;
|
||||
}
|
||||
|
||||
.sidebar-menu li a i {
|
||||
.sidebar li a i {
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.sidebar-menu li .sub {
|
||||
.sidebar li .sub {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-menu li .sub li a:hover, .sidebar-menu li .sub li.active a {
|
||||
color: #FF6C60;
|
||||
transition: all 0.3s ease;
|
||||
display: block;
|
||||
}
|
||||
.sidebar > li > .sub a:hover, .sidebar > li > .sub .active > a {
|
||||
color: #FF6C60;
|
||||
transition: all 0.3s ease;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-menu li .sub li {
|
||||
background: #35404D;
|
||||
margin: 0;
|
||||
padding: 0 10px 0 32px;
|
||||
}
|
||||
.sidebar > li > .sub a:hover, .sidebar > li > .sub a:focus {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.sidebar-menu li .sub li:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.sidebar li .sub li {
|
||||
margin: 0;
|
||||
padding: 0 10px 0 32px;
|
||||
}
|
||||
|
||||
.sidebar-menu li .sub li a {
|
||||
padding: 12px 0;
|
||||
}
|
||||
.sidebar li .sub li:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.sidebar li .sub li a {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
"hideMethod": "fadeOut"
|
||||
};
|
||||
|
||||
var $sidebar = $("#sidebar");
|
||||
var $sideMenu = $sidebar.find('.sidebar-menu');
|
||||
var $sidebar = $('aside');
|
||||
var $sideMenu = $(".sidebar");
|
||||
var $breadNav = $('#breadNav');
|
||||
|
||||
$sideMenu.dcAccordion({
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
if (top > middle) $sidebar.animate({ scrollTop: top + arch.outerHeight() / 2 - middle }, 500);
|
||||
}
|
||||
|
||||
$sidebar.on('click', 'a.dcjq-parent', function () {
|
||||
$sideMenu.on('click', 'a.dcjq-parent', function () {
|
||||
var o = $(this).offset();
|
||||
diff = 110 - o.top;
|
||||
if (diff > 0)
|
||||
|
|
@ -56,9 +56,8 @@
|
|||
$sidebar.getNiceScroll().resize();
|
||||
});
|
||||
|
||||
$('.sidebar-toggle-box').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
if ($(window).width() < 768) $sidebar.parent().toggleClass('open');
|
||||
$('.sidebar-toggle-box').on('click', function () {
|
||||
$('body').toggleClass('sidebar-open');
|
||||
});
|
||||
|
||||
$('[data-toggle="dropdown"].dropdown-select').dropdown('select');
|
||||
|
|
|
|||
Loading…
Reference in New Issue