// switch menu top // side

This commit is contained in:
Kevin Granger committed 2013-09-11 16:56:10 +02:00
1 parent ddd7ed2d2b
commit 99263a1492
5 files changed
+84 -41

No files matched your search

+1 -1
View File
@@ -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
@@ -363,8 +363,9 @@ html, body
border-bottom: solid 1px darken($brand-primary,10%) border-bottom: solid 1px darken($brand-primary,10%)
#nav-topbar #nav-topbar
position: fixed
height: 28px height: 28px
top: 36px top: 35px
left: 80 left: 80
width: 100% width: 100%
z-index: 600 z-index: 600
@@ -420,7 +421,7 @@ html, body
display: block!important display: block!important
> ul.menu > li > ul.menu > li
ul.submenu ul.submenu
display: none display: none!important
position: absolute position: absolute
margin: 0 margin: 0
padding: 0 padding: 0
@@ -455,7 +456,7 @@ html, body
#nav-sidebar #nav-sidebar
display: none display: none
.page-head .page-head
top: 64px top: 63px
#content #content
margin-left: 0 margin-left: 0
width: 100% width: 100%
@@ -1262,6 +1263,11 @@ fieldset > .row
margin: 0 4px 0 6px margin: 0 4px 0 6px
background-color: #ccc background-color: #ccc
+border-radius(6px) +border-radius(6px)
.tree-item-disable, .tree-folder-name-disable
color: #ccc
&:hover
color: #ccc
background-color: none
#carrier_wizard #carrier_wizard
position: relative position: relative
+72 -34
View File
@@ -25,42 +25,80 @@
$( document ).ready(function() { $( document ).ready(function() {
//nav side bar //nav side bar
$('#nav-sidebar li.maintab.has_submenu').append('<span class="submenu_expand"></span>'); function navSidebar(){
$('#nav-sidebar .submenu_expand').click(function(){ $('#nav-sidebar li.maintab.has_submenu').append('<span class="submenu_expand"></span>');
var $navId = $(this).parent(); $('#nav-sidebar .submenu_expand').on('click',function(){
$(".submenu-collapse").remove(); var $navId = $(this).parent();
if($(".expanded").length ){ $(".submenu-collapse").remove();
$(".expanded > ul").slideUp( if($(".expanded").length ){
"fast", $(".expanded > ul").slideUp(
function(){ "fast",
var $target = $(".expanded"); function(){
$target.removeClass("expanded"); var $target = $(".expanded");
$($navId).not($target).not(".active").addClass("expanded"); $target.removeClass("expanded");
$($navId).not($target).not(".active").children("ul:first").hide().slideDown(); $($navId).not($target).not(".active").addClass("expanded");
} $($navId).not($target).not(".active").children("ul:first").hide().slideDown();
); }
} );
else { }
$($navId).not(".active").addClass("expanded"); else {
$($navId).not(".active").children("ul:first").hide().slideDown(); $($navId).not(".active").addClass("expanded");
} $($navId).not(".active").children("ul:first").hide().slideDown();
});
//nav top bar
$(window).on("resize", function() {
$("#nav-topbar ul.menu").find("li.maintab").each(function(){
if ($(this).position().top > 0) {
$(this).addClass("hide");
} }
}); });
}); }
//nav top bar
$("#nav-topbar li.maintab.has_submenu").hover(function(){ function navTopbar(){
$(this).find("ul.submenu").fadeIn("fast").addClass("expanded"); $("#nav-topbar").on("mouseenter", "li.maintab.has_submenu",
}, function(){ function(){
//$(this).removeClass("expanded"); $(this).find("ul.submenu").fadeIn("fast").addClass("expanded");
$(this).find("ul.submenu").fadeOut("fast").removeClass("expanded"); });
}); $("#nav-topbar").on("mouseleave", "li.maintab.has_submenu",
function(){
$(this).find("ul.submenu").fadeOut("fast").removeClass("expanded");
});
$("#nav-topbar").find("li.maintab").each(
function(){
if ($(this).position().top > 0) {
$(this).addClass("hide");
}
});
//hide element over menu width
$(window).on("resize", function() {
$("#nav-topbar ul.menu").find("li.maintab").each(function(){
if ($(this).position().top > 0) {
$(this).addClass("hide");
}
});
});
}
//nav switch
function navSwitch(){
if ($("body").hasClass("page-sidebar")||$("body").hasClass("page-sidebar-closed")) {
$("body").removeClass("page-sidebar").removeClass("page-sidebar-closed").addClass("page-topbar");
$("#nav-sidebar").attr("id","nav-topbar");
$("#nav-topbar").off();
navTopbar();
} else {
$("body.page-topbar").removeClass("page-topbar").addClass("page-sidebar");
$("#nav-topbar").attr("id","nav-sidebar");
$("#nav-sidebar").off();
navSidebar();
}
}
navTopbar();
$("#header_shopname").on( "click",
function(e){
e.preventDefault();
navSwitch();
}
);
//tooltip //tooltip
$('.label-tooltip').tooltip(); $('.label-tooltip').tooltip();
+1 -2
View File
@@ -289,8 +289,7 @@
<div id="main"> <div id="main">
{include file='nav-top.tpl'} {include file='nav-top.tpl'}
{include file='nav-side.tpl'}
<div id="content" class="page-content"> <div id="content" class="page-content">
{if $display_header && $install_dir_exists} {if $display_header && $install_dir_exists}
<div class="alert alert-warning"> <div class="alert alert-warning">
@@ -1,4 +1,4 @@
<nav id="nav-topbar" data-spy="affix" data-offset-top="34px" role="navigation"> <nav id="nav-topbar" data-spy="affix" data-offset-top="0" role="navigation">
{if !$tab} {if !$tab}
<div class="mainsubtablist" style="display:none"></div> <div class="mainsubtablist" style="display:none"></div>
{/if} {/if}