mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-07 18:51:41 +09:00
Issue 1603: Admin menu navigation UX enhancement. (Desktop/Mobile)
git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@10341 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong
parent
c308ad67cb
commit
4d9155e861
5 changed files with 128 additions and 114 deletions
|
|
@ -15,17 +15,25 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="gnb jx">
|
||||
<ul>
|
||||
<li loop="$gnbUrlList=>$key,$value" class="activeOn"|cond="$parentSrl==$key"><a href="{getFullUrl('')}{$value['href']}">{$value['text']}</a>
|
||||
<div class="gnb">
|
||||
<ul class="nav">
|
||||
<li loop="$gnbUrlList=>$key,$value" class="activeOn"|cond="$parentSrl==$key"><a href="{getFullUrl('')}{$value['href']}"><span>{$value['text']}</span></a>
|
||||
<ul cond="count($value['list'])">
|
||||
<li loop="$value['list']=>$key2,$value2"><a href="{getFullUrl('')}{$value2['href']}">{$value2['text']}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bmk">
|
||||
<a href="#bmk" class="tgAnchor" data-effect="fade" data-duration="200">{$lang->favorite}</a>
|
||||
<ul id="bmk" class="tgContent">
|
||||
<select class="mnv">
|
||||
<block loop="$gnbUrlList=>$key,$value">
|
||||
<optgroup label="{$value['text']}" cond="count($value['list']) > 0">
|
||||
<option loop="$value['list']=>$key2,$value2" value="{getFullUrl('')}{$value2['href']}" selected="selected"|cond="$value2['text'] == $subMenuTitle">{$value2['text']}</option>
|
||||
</optgroup>
|
||||
<option cond="count($value['list']) == 0" value="{getFullUrl('')}{$value['href']}" selected="selected"|cond="!$subMenuTitle">{$value['text']}</option>
|
||||
</block>
|
||||
</select>
|
||||
<div class="bmk active">
|
||||
<a href="#bmk" class="bmAnchor" data-effect="fade" data-duration="200">{$lang->favorite}</a>
|
||||
<ul id="bmk" class="bmContent">
|
||||
<li loop="$favorite_list => $favorite">
|
||||
<a href="{getUrl('', 'module', 'admin', 'act', $favorite->admin_index_act)}">{$favorite->title}</a>
|
||||
<form class="action" action="">
|
||||
|
|
@ -40,6 +48,10 @@
|
|||
<li cond="!is_array($favorite_list) || count($favorite_list) < 1">{$lang->no_data}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<select class="mnv">
|
||||
<option disabled="disabled">{$lang->favorite}</option>
|
||||
<option loop="$favorite_list => $favorite" value="{getUrl('', 'module', 'admin', 'act', $favorite->admin_index_act)}">{$favorite->title}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="body">
|
||||
|
|
|
|||
|
|
@ -117,65 +117,45 @@ header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{di
|
|||
.x .form .a{margin:0 0 5px 0}
|
||||
.x .form .tgForm{margin-right:1em}
|
||||
/* Global Navigation Bar */
|
||||
.x .gnb{position:relative;clear:both;border:1px solid #c1c1c1;border-left:0;border-right:0;background-color:#efefef;background:#efefef -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#dcdcdc));background:#efefef -moz-linear-gradient(top, #efefef, #dcdcdc);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#efefef, endColorStr=#dcdcdc);zoom:1}
|
||||
.x .gnb.active{border-bottom:0;border-radius:0 0 5px 5px}
|
||||
.x .gnb ul{position:relative;display:inline-block;*display:inline;zoom:1;margin:0 0 0 20px;padding:1px;list-style:none}
|
||||
.x .gnb ul ul{_position:absolute;display:block;_display:inline;zoom:1;clear:both;margin:0;padding:0;border:0;overflow:hidden}
|
||||
.x .gnb.active ul{box-shadow:0 0 10px #999;padding:1px 5px 5px 5px;margin:0 -5px 0 15px;border:1px solid #ccc;border-top:0;border-bottom:0;background:#fff}
|
||||
.x .gnb.active ul ul{_position:relative;box-shadow:none;display:block;_display:inline;clear:both;padding:0;margin:0;border:0}
|
||||
.x .gnb ul:after{content:"";display:block;clear:both}
|
||||
.x .gnb li{position:relative;display:inline-block;*display:inline;zoom:1;vertical-align:top;overflow:hidden;margin:0 -1px 0 0;*margin:0 -5px 0 0}
|
||||
.x .gnb li.activeOn{z-index:10}
|
||||
.x .gnb li.activeOn>a{border:1px solid #ccc}
|
||||
.x .gnb li li{display:block;_float:left;clear:both;overflow:hidden;border:0;margin:0}
|
||||
.x .gnb li li:first-child{border:0}
|
||||
.x .gnb li a{display:block;_float:left;font-weight:bold;color:#333;font-size:12px;height:14px;padding:9px 15px;white-space:nowrap;text-decoration:none;text-shadow:0 1px 0 #fff;zoom:1;border:1px solid #fff;border-top:0;border-bottom:0;*border:0}
|
||||
.x .gnb li a:hover,
|
||||
.x .gnb li a:active,
|
||||
.x .gnb li a:focus{background:#f4f4f4}
|
||||
.x .gnb li.activeOn>a{background:#fff;padding:8px 15px}
|
||||
.x .gnb li li a{color:#555;background:#fff;padding:5px 15px !important;font-weight:normal !important;border:0 !important}
|
||||
.x .gnb li li a:hover,
|
||||
.x .gnb li li a:active,
|
||||
.x .gnb li li a:focus{border:0;background:#eee}
|
||||
.x .gnb .setting{position:absolute;top:8px;right:2em;width:16px;height:0;padding:16px 0 0 0;overflow:hidden;background:url(../img/iconSetting.gif) no-repeat center}
|
||||
.x .gnb.jx ul{display:block;position:static;padding:0}
|
||||
.x .gnb.jx li{float:none;clear:both;border-top:1px solid #ccc}
|
||||
.x .gnb.jx ul ul{border:0}
|
||||
.x .gnb.jx li li{border:0}
|
||||
.x .gnb.jx li a{float:none;display:block}
|
||||
.x .gnb.jx li a:hover,
|
||||
.x .gnb.jx li a:active,
|
||||
.x .gnb.jx li a:focus{background:none}
|
||||
.x .gnb.jx li.activeOn>a{background:#ddd}
|
||||
.x .gnb{position:relative;height:34px;clear:both;border:1px solid #c1c1c1;border-left:0;border-right:0;background-color:#efefef;background:#efefef -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#dcdcdc));background:#efefef -moz-linear-gradient(top, #efefef, #dcdcdc);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#efefef, endColorStr=#dcdcdc);zoom:1}
|
||||
.x .gnb .nav{position:relative;display:inline-block;*display:inline;zoom:1;margin:0 0 0 20px;padding:1px;list-style:none}
|
||||
.x .gnb .nav ul{_position:absolute;display:block;_display:inline;zoom:1;clear:both;margin:0;padding:0;border:0;overflow:hidden}
|
||||
.x .gnb.active .nav{top:-5px;padding:5px 5px 5px 0;margin:0 0 0 20px;border:1px solid #aaa;background:#fff;box-shadow:0 0 10px #999;border-radius:5px}
|
||||
.x .gnb.active .nav ul{top:0;_position:relative;box-shadow:none;display:block;_display:inline;clear:both;padding:0;margin:0;border:0}
|
||||
.x .gnb .nav:after{content:"";display:block;clear:both}
|
||||
.x .gnb .nav li{position:relative;display:inline-block;*display:inline;zoom:1;vertical-align:top;overflow:hidden;margin:0}
|
||||
.x .gnb .nav li.activeOn{z-index:10}
|
||||
.x .gnb .nav li.activeOn>a{border:1px solid #ccc}
|
||||
.x .gnb .nav li li{display:block;_float:left;clear:both;overflow:hidden;border:0;margin:0}
|
||||
.x .gnb .nav li li:first-child{border:0}
|
||||
.x .gnb .nav li a{display:block;_float:left;font-weight:bold;color:#333;font-size:12px;height:14px;padding:9px 0;white-space:nowrap;text-decoration:none;text-shadow:0 1px 0 #fff;zoom:1}
|
||||
.x .gnb .nav li a span{padding:0 15px;border-left:1px solid #fff}
|
||||
.x .gnb.active .nav li a span,
|
||||
.x .gnb .nav li:first-child a span,
|
||||
.x .gnb .nav li.activeOn+li a span{border:0;margin:0 0 0 1px}
|
||||
.x .gnb .nav li a:hover,
|
||||
.x .gnb .nav li a:active,
|
||||
.x .gnb .nav li a:focus{background:#f4f4f4}
|
||||
.x .gnb .nav li.activeOn>a{background:#fff;padding:8px 0}
|
||||
.x .gnb .nav li li a{color:#555;background:#fff;padding:5px 15px !important;font-weight:normal !important;border:0 !important}
|
||||
.x .gnb .nav li li a:hover,
|
||||
.x .gnb .nav li li a:active,
|
||||
.x .gnb .nav li li a:focus{border:0;background:#eee}
|
||||
.x .gnb .mnv{width:100%;height:32px;display:none}
|
||||
.x .gnb .bmk{position:absolute;right:20px;top:10px;padding:0 15px;text-align:right}
|
||||
.x .gnb .bmk.active{top:-5px;padding:14px 14px 10px 15px;background-color:#fff;border:1px solid #aaa;box-shadow:0 0 10px #999;border-radius:5px}
|
||||
.x .gnb .bmk .bmAnchor{height:16px;text-shadow:0 1px 0 #fff;display:inline-block;padding:0 0 0 20px;background:url(../img/iconFavorite.gif) no-repeat 0 -16px}
|
||||
.x .gnb .bmk ul{display:none}
|
||||
.x .gnb .bmk.active ul{position:relative;list-style:none;display:block !important;text-align:left;background:none;margin:0 !important;padding:10px 0 0 0 !important;border:0;box-shadow:none;border-radius:0}
|
||||
.x .gnb .bmk li{display:block;position:relative;padding:3px 15px 3px 0 !important;white-space:nowrap}
|
||||
.x .gnb .bmk li a{display:inline;padding:0;background:none !important;font-weight:normal}
|
||||
.x .gnb .bmk li .action{position:absolute;top:0;right:0}
|
||||
.x .gnb .bmk li .action .text{text-decoration:none;width:16px;text-align:center;margin:0}
|
||||
@media only all and (max-width:860px){
|
||||
.x .gnb ul{padding-left:1em}
|
||||
.x .gnb .setting{right:1em}
|
||||
}
|
||||
@media only all and (max-width:640px){
|
||||
.x .gnb ul{display:block;position:static;padding:0}
|
||||
.x .gnb li{float:none;clear:both;border-top:1px solid #ccc}
|
||||
.x .gnb ul ul{border:0;position:static}
|
||||
.x .gnb li li{border:0}
|
||||
.x .gnb li a{float:none;display:block}
|
||||
.x .gnb li a:hover,
|
||||
.x .gnb li a:active,
|
||||
.x .gnb li a:focus{background:none}
|
||||
.x .gnb li.activeOn>a{background:#ddd}
|
||||
}
|
||||
/* Favorite */
|
||||
.x .bmk{position:absolute;right:20px;top:10px;padding:0 0 0 20px;background:url(../img/iconFavorite.gif) no-repeat 0 -16px}
|
||||
.x .bmk>a{text-shadow:0 1px 0 #fff}
|
||||
.x .bmk ul{position:absolute;top:24px;right:0;list-style:none;margin:0 !important;padding:5px 10px !important;border:1px solid #aaa;border-radius:5px;background:#fff;box-shadow:1px 1px 3px #aaa}
|
||||
.x .bmk li{display:block;position:relative;padding:3px 20px 3px 0 !important;white-space:nowrap}
|
||||
.x .bmk li a{padding:0;background:none !important;font-weight:normal}
|
||||
.x .bmk li .action{position:absolute;top:0;right:0}
|
||||
.x .bmk li .action .text{text-decoration:none;width:16px;text-align:center;margin:0}
|
||||
@media only all and (max-width:640px){
|
||||
.x .bmk{position:static;background-color:#fff;padding:10px 20px;background:#fff}
|
||||
.x .bmk .tgAnchor{display:block}
|
||||
.x .bmk ul{position:relative;border:0;border-top:1px solid #ccc;border-radius:0;box-shadow:none;padding:0;margin:5px 0 0 0}
|
||||
.x .bmk li{position:relative;top:-1px;border-top:1px dotted #ccc}
|
||||
.x .gnb{height:auto}
|
||||
.x .gnb .nav,
|
||||
.x .gnb .bmk{display:none}
|
||||
.x .gnb .mnv{display:block}
|
||||
}
|
||||
/* Local Navigation */
|
||||
.x .lnb{position:relative;float:left;width:210px;margin:1em 0 1em -240px;line-height:normal;zoom:1;display:inline}
|
||||
|
|
@ -271,19 +251,22 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
|
|||
.x .h2Anchor{position:absolute;right:0;border:0;background:none;color:#00f;text-decoration:underline}
|
||||
/* Skip Navigation */
|
||||
.x .skipNav{margin:0;text-align:center}
|
||||
.x .skipNav a{position:absolute;width:1px;height:1px;display:block;font-weight:bold;overflow:hidden}
|
||||
@media only all and (max-width:860px){
|
||||
.x .skipNav{display:none}
|
||||
}
|
||||
.x .skipNav a{position:absolute;width:1px;height:1px;display:block;padding:10px 0;font-weight:bold;overflow:hidden}
|
||||
.x .skipNav a:hover,
|
||||
.x .skipNav a:active,
|
||||
.x .skipNav a:focus{position:relative;width:auto;height:auto;padding:10px 0}
|
||||
.x .skipNav a:focus{position:relative;width:auto;height:auto}
|
||||
/* Header */
|
||||
.x .header{position:relative;z-index:2;padding:30px 0 0 0;background:#4c4c4c;box-shadow:0 0 10px #aaa;zoom:1;border-radius:6px}
|
||||
.x .header{position:relative;z-index:2;padding:30px 0 0 0;background:#4c4c4c;box-shadow:0 0 10px #aaa;zoom:1;border-radius:5px 5px 0 0}
|
||||
.x .header:after{content:"";display:block;clear:both}
|
||||
.x .header a{text-decoration:none}
|
||||
.x .header h1{margin:0 15px 10px 20px;font-size:24px;line-height:32px;display:inline-block;*display:inline;zoom:1;vertical-align:middle}
|
||||
.x .header h1{margin:0 0 10px 20px;font-size:24px;line-height:32px;display:inline-block;*display:inline;zoom:1;vertical-align:middle}
|
||||
.x .header h1 *{vertical-align:middle}
|
||||
.x .header h1 a{color:#fff;text-shadow:1px 1px 0 #000;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000, Positive=true);zoom:1}
|
||||
.x .header h1 a{display:inline-block;color:#fff;text-shadow:1px 1px 0 #000;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000, Positive=true);zoom:1}
|
||||
.x .header h1 .url{font-size:12px;font-weight:normal}
|
||||
.x .header .site{margin:0;display:inline-block;*display:inline;zoom:1}
|
||||
.x .header .site{margin:0 0 10px 20px;display:inline-block;*display:inline;zoom:1}
|
||||
.x .header .site a{color:#fff;text-decoration:underline}
|
||||
.x .header #moveSiteList{padding:10px 1em 5px 1em;margin:0}
|
||||
.x .header #moveSiteList ul{list-style:none;margin:0;padding:0}
|
||||
|
|
@ -590,7 +573,6 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
|
|||
.x a.cMenu{display:inline-block;width:16px;height:0;padding:16px 0 0 0;overflow:hidden;vertical-align:middle;background:url(../../../../common/img/icon.bubble.png) no-repeat}
|
||||
/* Responsive Layout */
|
||||
@media only all and (max-width:860px){
|
||||
.x .header h1{margin-left:.7em}
|
||||
.x .header .account ul{padding-right:10px}
|
||||
.x .body{padding:0}
|
||||
.x .content{float:none;margin-left:0}
|
||||
|
|
@ -601,10 +583,6 @@ body.modalContainer{_height:100%;_width:100%} /* IE6 only */
|
|||
.x .easyNav .category{float:none;display:block;width:auto}
|
||||
.x .easyNav .filter{position:static}
|
||||
}
|
||||
@media only all and (max-width:640px){
|
||||
.x .skipNav a{position:relative;width:auto;height:auto}
|
||||
.modal{position:absolute}
|
||||
}
|
||||
/* Legacy Code (Don't use it. It will be removed as soon as possible.) */
|
||||
.x h3.xeAdmin,
|
||||
.x h4.xeAdmin{position:relative;border-bottom-style:solid;border-bottom-color:#ccc;zoom:1}
|
||||
|
|
|
|||
2
modules/admin/tpl/css/admin.min.css
vendored
2
modules/admin/tpl/css/admin.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -152,45 +152,69 @@ jQuery(function($){
|
|||
// Global Navigation Bar
|
||||
jQuery(function($){
|
||||
|
||||
$.fn.xeMenu = function(){
|
||||
this
|
||||
.removeClass('jx')
|
||||
.attr('role', 'navigation') // WAI-ARIA role
|
||||
.find('li')
|
||||
.attr('role', 'menuitem') // WAI-ARIA role
|
||||
.find('>ul').css('height','0').end()
|
||||
.filter(':has(>ul)')
|
||||
.attr('aria-haspopup', 'true') // WAI-ARIA
|
||||
$.fn.xeMenu = function(){
|
||||
this
|
||||
.attr('role', 'navigation') // WAI-ARIA role
|
||||
.find('>.nav>li')
|
||||
.attr('role', 'menuitem') // WAI-ARIA role
|
||||
.find('>ul').css('height','0').end()
|
||||
.filter(':has(>ul)')
|
||||
.attr('aria-haspopup', 'true') // WAI-ARIA
|
||||
.end()
|
||||
.end()
|
||||
.end()
|
||||
.mouseover(function(){
|
||||
$(this)
|
||||
.addClass('active')
|
||||
.find('>ul>li>ul').css('height','auto').end()
|
||||
.find('>.bmk>.tgContent').show();
|
||||
})
|
||||
.mouseleave(function(){
|
||||
$(this)
|
||||
.removeClass('active')
|
||||
.find('>ul>li>ul').css('height','0').end()
|
||||
.find('>.bmk>.tgContent').hide();
|
||||
})
|
||||
.focusout(function(){
|
||||
var $this = $(this);
|
||||
setTimeout(function(){
|
||||
if(!$this.find(':focus').length) {
|
||||
$this.removeClass('active').find('>ul>li>ul').css('height','0');
|
||||
.find('>.nav')
|
||||
.mouseover(function(){
|
||||
$(this)
|
||||
.parent('.gnb').addClass('active').end()
|
||||
.find('>li>ul').css('height','auto').end()
|
||||
})
|
||||
.mouseleave(function(){
|
||||
$(this)
|
||||
.parent('.gnb').removeClass('active').end()
|
||||
.find('>li>ul').css('height','0').end()
|
||||
})
|
||||
.focusout(function(){
|
||||
var $this = $(this);
|
||||
setTimeout(function(){
|
||||
if(!$this.find(':focus').length) {
|
||||
$this.mouseleave();
|
||||
}
|
||||
}, 1);
|
||||
})
|
||||
.delegate('a', {
|
||||
focus : function(){
|
||||
$(this).mouseover();
|
||||
}
|
||||
}, 1);
|
||||
})
|
||||
.delegate('a', {
|
||||
focus : function(){
|
||||
$(this).mouseover();
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
this
|
||||
.find('>.bmk')
|
||||
.removeClass('active')
|
||||
.mouseover(function(){
|
||||
$(this).addClass('active')
|
||||
})
|
||||
.mouseleave(function(){
|
||||
$(this).removeClass('active')
|
||||
})
|
||||
.focusout(function(){
|
||||
var $this = $(this);
|
||||
setTimeout(function(){
|
||||
if(!$this.find(':focus').length) {
|
||||
$this.mouseleave();
|
||||
}
|
||||
}, 1);
|
||||
})
|
||||
.delegate('a', {
|
||||
focus : function(){
|
||||
$(this).mouseover();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$('div.gnb').xeMenu();
|
||||
|
||||
$('div.gnb').xeMenu();
|
||||
$('.gnb>.mnv').change(function(){
|
||||
window.location.href=$(this).find('option:selected').val();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
2
modules/admin/tpl/js/admin.min.js
vendored
2
modules/admin/tpl/js/admin.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue