// fix switch menu top // side
This commit is contained in:
1 parent
739d1434b5
commit
18212420c3
3 files changed
+41
-38
No files matched your search
@@ -30,4 +30,4 @@
|
|||||||
* Email: dave@fontawesome.io
|
* Email: dave@fontawesome.io
|
||||||
* Twitter: http://twitter.com/byscuits
|
* Twitter: http://twitter.com/byscuits
|
||||||
* Work: Lead Product Designer @ Kyruus - http://kyruus.com
|
* Work: Lead Product Designer @ Kyruus - http://kyruus.com
|
||||||
*/@font-face{font-family:'FontAwesome';src:url("../font/fontawesome-webfont.eot?v=3.2.1");src:url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"),url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"),url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none}.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em}a [class^="icon-"],a [class*=" icon-"]{display:inline}[class^="icon-"].icon-fixed-width,[class*=" icon-"].icon-fixed-width{display:inline-block;width:1.1428571428571428em;text-align:right;padding-right:0.2857142857142857em}[class^="icon-"].icon-fixed-width.icon-large,[class*=" icon-"].icon-fixed-width.icon-large{width:1.4285714285714286em}.icons-ul{margin-left:2.142857142857143em;list-style-type:none}.icons-ul>li{position:relative}.icons-ul .icon-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;text-align:center;line-height:inherit}[class^="icon-"].hide,[class*=" icon-"].hide{display:none}.icon-muted{color:#eeeeee}.icon-light{color:#ffffff}.icon-dark{color:#333333}.icon-border{border:solid 1px #eeeeee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.icon-2x{font-size:2em}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon-3x{font-size:3em}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.icon-4x{font-size:4em}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.icon-5x{font-size:5em}.icon-5x.icon-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}.pull-right,#content h3 .panel-heading-action,#content .panel-heading .panel-heading-action,#content #header_notifs_icon_wrapper .notifs_panel .notifs_panel_header .panel-heading-action,#header_notifs_icon_wrapper .notifs_panel #content .notifs_panel_header .panel-heading-action{float:right}.pull-left,.page-head h2.page-title{float:left}[class^="icon-"].pull-left,.page-head h2[class^="icon-"].page-title,[class*=" icon-"].pull-left,.page-head h2[class*=" icon-"].page-title{margin-right:.3em}[class^="icon-"].pull-right,#content h3 [class^="icon-"].panel-heading-action,#content .panel-heading [class^="icon-"].panel-heading-action,#content #header_notifs_icon_wrapper .notifs_panel .notifs_panel_header [class^="icon-"].panel-heading-action,#header_notifs_icon_wrapper .notifs_panel #content .notifs_panel_header [class^="icon-"].panel-heading-action,[class*=" icon-"].pull-right,#content h3 [class*=" icon-"].panel-heading-action,#content .panel-heading [class*=" icon-"].panel-heading-action,#content #header_notifs_icon_wrapper .notifs_panel .notifs_panel_header [class*=" icon-"].panel-heading-action,#header_notifs_icon_wrapper .notifs_panel #content .notifs_panel_header [class*=" icon-"].panel-heading-action{margin-left:.3em}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],#header_infos .nav>.active>a>[class^="icon-"],.navbar-inverse #header_notifs_icon_wrapper>.active>a>[class^="icon-"],#header_infos #header_notifs_icon_wrapper>.active>a>[class^="icon-"],.navbar-inverse #header_employee_box>.active>a>[class^="icon-"],#header_infos #header_employee_box>.active>a>[class^="icon-"],.navbar-inverse #header_quick>.active>a>[class^="icon-"],#header_infos #header_quick>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],#header_infos .nav>.active>a>[class*=" icon-"],.navbar-inverse #header_notifs_icon_wrapper>.active>a>[class*=" icon-"],#header_infos #header_notifs_icon_wrapper>.active>a>[class*=" icon-"],.navbar-inverse #header_employee_box>.active>a>[class*=" icon-"],#header_infos #header_employee_box>.active>a>[class*=" icon-"],.navbar-inverse #header_quick>.active>a>[class*=" icon-"],#header_infos #header_quick>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none}.btn [class^="icon-"].icon-large,.nav [class^="icon-Line truncated
|
*/@font-face{font-family:'FontAwesome';src:url("../font/fontawesome-webfont.eot?v=3.2.1");src:url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"),url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"),url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none}.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em}a [class^="icon-"],a [class*=" icon-"]{display:inline}[class^="icon-"].icon-fixed-width,[class*=" icon-"].icon-fixed-width{display:inline-block;width:1.1428571428571428em;text-align:right;padding-right:0.2857142857142857em}[class^="icon-"].icon-fixed-width.icon-large,[class*=" icon-"].icon-fixed-width.icon-large{width:1.4285714285714286em}.icons-ul{margin-left:2.142857142857143em;list-style-type:none}.icons-ul>li{position:relative}.icons-ul .icon-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;text-align:center;line-height:inherit}[class^="icon-"].hide,[class*=" icon-"].hide{display:none}.icon-muted{color:#eeeeee}.icon-light{color:#ffffff}.icon-dark{color:#333333}.icon-border{border:solid 1px #eeeeee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.icon-2x{font-size:2em}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon-3x{font-size:3em}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.icon-4x{font-size:4em}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.icon-5x{font-size:5em}.icon-5x.icon-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}.pull-right,#content h3 .panel-heading-action,#content .panel-heading .panel-heading-action,#content #header_notifs_icon_wrapper .notifs_panel .notifs_panel_header .panel-heading-action,#header_notifs_icon_wrapper .notifs_panel #content .notifs_panel_header .panel-heading-action{float:right}.pull-left,.page-head h2.page-title{float:left}[class^="icon-"].pull-left,.page-head h2[class^="icon-"].page-title,[class*=" icon-"].pull-left,.page-head h2[class*=" icon-"].page-title{margin-right:.3em}[class^="icon-"].pull-right,#content h3 [class^="icon-"].panel-heading-action,#content .panel-heading [class^="icon-"].panel-heading-action,#content #header_notifs_icon_wrapper .notifs_panel .notifs_panel_header [class^="icon-"].panel-heading-action,#header_notifs_icon_wrapper .notifs_panel #content .notifs_panel_header [class^="icon-"].panel-heading-action,[class*=" icon-"].pull-right,#content h3 [class*=" icon-"].panel-heading-action,#content .panel-heading [class*=" icon-"].panel-heading-action,#content #header_notifs_icon_wrapper .notifs_panel .notifs_panel_header [class*=" icon-"].panel-heading-action,#header_notifs_icon_wrapper .notifs_panel #content .notifs_panel_header [class*=" icon-"].panel-heading-action{margin-left:.3em}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],#header_infos .nav>.active>a>[class^="icon-"],.navbar-inverse #header_notifs_icon_wrapper>.active>a>[class^="icon-"],#header_infos #header_notifs_icon_wrapper>.active>a>[class^="icon-"],.navbar-inverse #header_employee_box>.active>a>[class^="icon-"],#header_infos #header_employee_box>.active>a>[class^="icon-"],.navbar-inverse #header_quick>.active>a>[class^="icon-"],#header_infos #header_quick>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],#header_infos .nav>.active>a>[class*=" icon-"],.navbar-inverse #header_notifs_icon_wrapper>.active>a>[class*=" icon-"],#header_infos #header_notifs_icon_wrapper>.active>a>[class*=" icon-"],.navbar-inverse #header_employee_box>.active>a>[class*=" icon-"],#header_infos #header_employee_box>.active>a>[class*=" icon-"],.navbar-inverse #header_quick>.active>a>[class*=" icon-"],#header_infos #header_quick>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none}.btn [class^="icon-"].icon-large,.nav [class^="icon-Line truncated
|
||||||
@@ -356,8 +356,7 @@ html, body
|
|||||||
text-decoration: none
|
text-decoration: none
|
||||||
&:last-child a
|
&:last-child a
|
||||||
border-bottom: none
|
border-bottom: none
|
||||||
&.active
|
&.active a
|
||||||
a
|
|
||||||
color: contrast-color($brand-primary, white, #333, 10%)
|
color: contrast-color($brand-primary, white, #333, 10%)
|
||||||
background-color: $brand-primary
|
background-color: $brand-primary
|
||||||
border-bottom: solid 1px darken($brand-primary,10%)
|
border-bottom: solid 1px darken($brand-primary,10%)
|
||||||
@@ -416,8 +415,8 @@ html, body
|
|||||||
ul.submenu
|
ul.submenu
|
||||||
display: none!important
|
display: none!important
|
||||||
@include box-shadow(rgba(black,0.3) 0 2px 4px)
|
@include box-shadow(rgba(black,0.3) 0 2px 4px)
|
||||||
> ul.menu > li
|
> ul.menu > li.expanded
|
||||||
ul.submenu.expanded
|
ul.submenu
|
||||||
display: block!important
|
display: block!important
|
||||||
> ul.menu > li
|
> ul.menu > li
|
||||||
ul.submenu
|
ul.submenu
|
||||||
@@ -446,9 +445,9 @@ html, body
|
|||||||
&:last-child a
|
&:last-child a
|
||||||
border-bottom: none
|
border-bottom: none
|
||||||
&.active a
|
&.active a
|
||||||
color: contrast-color($main-color, white, #333, 10%)
|
color: contrast-color($brand-primary, white, #333, 10%)
|
||||||
background-color: $main-color
|
background-color: $brand-primary
|
||||||
border-bottom: solid 1px darken($main-color,10%)
|
border-bottom: solid 1px darken($brand-primary,10%)
|
||||||
|
|
||||||
.page-topbar
|
.page-topbar
|
||||||
#main
|
#main
|
||||||
|
|||||||
@@ -29,45 +29,50 @@ $( document ).ready(function() {
|
|||||||
$('#nav-sidebar li.maintab.has_submenu').append('<span class="submenu_expand"></span>');
|
$('#nav-sidebar li.maintab.has_submenu').append('<span class="submenu_expand"></span>');
|
||||||
$('#nav-sidebar .submenu_expand').on('click',function(){
|
$('#nav-sidebar .submenu_expand').on('click',function(){
|
||||||
var $navId = $(this).parent();
|
var $navId = $(this).parent();
|
||||||
$(".submenu-collapse").remove();
|
$('.submenu-collapse').remove();
|
||||||
if($(".expanded").length ){
|
if($('.expanded').length ){
|
||||||
$(".expanded > ul").slideUp(
|
$('.expanded > ul').slideUp(
|
||||||
"fast",
|
'fast',
|
||||||
function(){
|
function(){
|
||||||
var $target = $(".expanded");
|
var $target = $('.expanded');
|
||||||
$target.removeClass("expanded");
|
$target.removeClass('expanded');
|
||||||
$($navId).not($target).not(".active").addClass("expanded");
|
$($navId).not($target).not('.active').addClass('expanded');
|
||||||
$($navId).not($target).not(".active").children("ul:first").hide().slideDown();
|
$($navId).not($target).not('.active').children('ul:first').hide().slideDown();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
$($navId).not(".active").addClass("expanded");
|
$($navId).not('.active').addClass('expanded');
|
||||||
$($navId).not(".active").children("ul:first").hide().slideDown();
|
$($navId).not('.active').children('ul:first').hide().slideDown();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//nav top bar
|
//nav top bar
|
||||||
function navTopbar(){
|
function navTopbar(){
|
||||||
$("#nav-topbar").on("mouseenter", "li.maintab.has_submenu",
|
$('.expanded').removeClass('expanded');
|
||||||
|
|
||||||
|
$('#nav-topbar').on('mouseenter', 'li.maintab.has_submenu',
|
||||||
function(){
|
function(){
|
||||||
$(this).find("ul.submenu").fadeIn("fast").addClass("expanded");
|
$(this).addClass('expanded');
|
||||||
});
|
});
|
||||||
$("#nav-topbar").on("mouseleave", "li.maintab.has_submenu",
|
$('#nav-topbar').on('mouseleave', 'li.maintab.has_submenu',
|
||||||
function(){
|
function(){
|
||||||
$(this).find("ul.submenu").fadeOut("fast").removeClass("expanded");
|
$(this).removeClass('expanded');
|
||||||
});
|
});
|
||||||
$("#nav-topbar").find("li.maintab").each(
|
|
||||||
|
//todo hide element over menu width on load
|
||||||
|
$('#nav-topbar').find('li.maintab').each(
|
||||||
function(){
|
function(){
|
||||||
if ($(this).position().top > 0) {
|
if ($(this).position().top > 0) {
|
||||||
$(this).addClass("hide");
|
$(this).addClass('hide');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
//hide element over menu width
|
|
||||||
$(window).on("resize", function() {
|
//todo hide element over menu width on resize
|
||||||
$("#nav-topbar ul.menu").find("li.maintab").each(function(){
|
$(window).on('resize', function() {
|
||||||
|
$('#nav-topbar ul.menu').find('li.maintab').each(function(){
|
||||||
if ($(this).position().top > 0) {
|
if ($(this).position().top > 0) {
|
||||||
$(this).addClass("hide");
|
$(this).addClass('hide');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -76,30 +81,29 @@ $( document ).ready(function() {
|
|||||||
//nav switch
|
//nav switch
|
||||||
function navSwitch(){
|
function navSwitch(){
|
||||||
|
|
||||||
if ($("body").hasClass("page-sidebar")||$("body").hasClass("page-sidebar-closed")) {
|
if ($('body').hasClass('page-sidebar')||$('body').hasClass('page-sidebar-closed')) {
|
||||||
$("body").removeClass("page-sidebar").removeClass("page-sidebar-closed").addClass("page-topbar");
|
$('body').removeClass('page-sidebar').removeClass('page-sidebar-closed').addClass('page-topbar');
|
||||||
$("#nav-sidebar").attr("id","nav-topbar");
|
$('#nav-sidebar').attr('id','nav-topbar');
|
||||||
$("#nav-topbar").off();
|
$('#nav-topbar').off();
|
||||||
navTopbar();
|
navTopbar();
|
||||||
} else {
|
} else {
|
||||||
$("body.page-topbar").removeClass("page-topbar").addClass("page-sidebar");
|
$('body.page-topbar').removeClass('page-topbar').addClass('page-sidebar');
|
||||||
$("#nav-topbar").attr("id","nav-sidebar");
|
$('#nav-topbar').attr('id','nav-sidebar');
|
||||||
$("#nav-sidebar").off();
|
$('#nav-sidebar').off();
|
||||||
navSidebar();
|
navSidebar();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//todo add condition
|
||||||
navTopbar();
|
navTopbar();
|
||||||
|
|
||||||
$("#header_shopname").on( "click",
|
$('#header_shopname').on('click',
|
||||||
function(e){
|
function(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
navSwitch();
|
navSwitch();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//tooltip
|
//tooltip
|
||||||
$('.label-tooltip').tooltip();
|
$('.label-tooltip').tooltip();
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user