Optimize dropdown global naviagtion script

git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@9155 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
taggon 2011-09-15 08:11:47 +00:00
parent ea20e214ba
commit 11ef717017
4 changed files with 89 additions and 100 deletions

View file

@ -6,28 +6,20 @@
<ul>
<li><a href="{getUrl('', 'module', 'admin', 'act', 'dispMemberAdminInfo', 'is_admin', 'Y', 'member_srl', $logged_info->member_srl)}">{$logged_info->email_address}</a></li>
<li><a href="{getUrl('', 'module','admin','act','procAdminLogout')}">Log-out</a></li>
<li><a href="#language" class="tgAnchor language" data-effect="slide" data-duration="100"><!--@foreach($lang_supported as $key => $val)--><block cond="$key==$lang_type">{$val}</block><!--@end--></a>
<li><a href="#language" class="tgAnchor language" data-effect="slide" data-duration="100">{$lang_supported[$lang_type]}</a>
<ul class="tgContent" id="language">
<!--@foreach($lang_supported as $key => $val)-->
<li class="selected"|cond="$key==$lang_type"><a href="{getUrl('l',$key)}" data-langcode="{$key}" onclick="doChangeLangType('{$key}'); return false;">{$val}</a></li>
<!--@end-->
<li loop="$lang_supported=>$key,$val" class="selected"|cond="$key==$lang_type"><a href="{getUrl('l',$key)}" data-langcode="{$key}" onclick="doChangeLangType('{$key}'); return false;">{$val}</a></li>
</ul>
</li>
</ul>
</div>
<div class="gnb jx">
<ul>
<!--@foreach($gnbUrlList AS $key=>$value)-->
<li <!--@if($parentSrl == $key)-->class="activeOn"<!--@end-->><a href="{html_entity_decode($value['href'])}">{$value['text']}</a>
<!--@if(count($gnbUrlList[$key]['list']) > 0)-->
<ul>
<!--@foreach($gnbUrlList[$key]['list'] AS $key2=>$value2)-->
<li><a href="{html_entity_decode($value2['href'])}">{$value2['text']}</a></li>
<!--@end-->
<li loop="$gnbUrlList=>$key,$value" class="activeOn"|cond="$parentSrl==$key"><a href="{$value['href']}">{$value['text']}</a>
<ul cond="count($value['list'])">
<li loop="$value['list']=>$key2,$value2"><a href="{$value2['href']}">{$value2['text']}</a></li>
</ul>
<!--@end-->
</li>
<!--@end-->
</ul>
</div>
</div>

View file

@ -108,7 +108,7 @@ header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{di
/* 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 ul{margin:0;padding:0 0 0 2em;list-style:none;border:1px solid #fff;border-left:0;border-right:0;zoom:1}
.x .gnb ul ul{position:absolute;top:30px;left:0;border:1px solid #ccc;padding:0;background:#fff}
.x .gnb ul ul{position:absolute;top:30px;left:-2px;border:1px solid #ccc;padding:0;background:#fff;min-width:80px}
.x .gnb ul:after{content:"";display:block;clear:both}
.x .gnb li{position:relative;float:left;border:1px solid #fff;border-top:0;border-bottom:0;margin:0 -1px 0 0}
.x .gnb li li{float:none;clear:both;overflow:hidden;border:0;border-top:1px dotted #ccc;margin:0;padding:2px}
@ -117,8 +117,7 @@ header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{di
.x .gnb li a:hover,
.x .gnb li a:active,
.x .gnb li a:focus,
.x .gnb li.active a,
.x .gnb li.activeOn a{background:#fff;border:1px solid #ddd;padding:7px 17px}
.x .gnb li.active a{background:#fff}
.x .gnb li li a{display:block;float:none;color:#555;padding:5px 15px !important;font-weight:normal !important;border:0 !important}
.x .gnb li li a:hover,
.x .gnb li li a:active,

View file

@ -53,50 +53,6 @@ jQuery(function($){
.trigger('update.checkbox', [name, this.checked]);
});
// Global Navigation Bar
var $menuitems = $('div.gnb')
.removeClass('jx')
.attr('role', 'navigation') // WAI-ARIA role
.find('li')
.attr('role', 'menuitem') // WAI-ARIA role
.filter(':has(>ul)')
.attr('aria-haspopup', 'true') // WAI-ARIA
.find('>ul').hide().end()
.mouseover(function(){
var $this = $(this);
if($this.css('float') == 'left') $this.find('>ul:hidden').prev('a').click();
})
.mouseleave(function(){
var $this = $(this);
if($this.css('float') == 'left') $this.find('>ul:visible').slideUp(100);
})
.find('>a')
.focus(function(){ $(this).click() })
.click(function(){
$menuitems.removeClass('active');
$(this)
.next('ul').slideToggle(100).end()
.parent().addClass('active');
return false;
})
.end()
.end()
.find('>a')
.blur(function(){
var anchor = this;
setTimeout(function(){
var $a = $(anchor), $ul = $a.closest('ul'), $focus = $ul.find('a:focus');
if(!$focus.length || $focus.closest('ul').parent('div.gnb').length) {
if($ul.parent('div.gnb').length) $ul = $a.next('ul');
$ul.filter(':visible').slideUp(100);
}
}, 10);
})
.end()
// pagination
$.fn.xePagination = function(){
this
@ -180,6 +136,54 @@ jQuery(function($){
$('.masked').xeMask();
});
// 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').hide().end()
.filter(':has(>ul)')
.attr('aria-haspopup', 'true') // WAI-ARIA
.end()
.end()
.delegate('li', {
mouseover : function(){
$(this)
.addClass('active')
.find('>ul').show().end()
.parentsUntil('.gnb')
.filter('li').addClass('active').end()
.end()
},
mouseleave : function(){
$(this)
.removeClass('active')
.find('>ul').hide();
},
focusout : function(){
var $this = $(this);
setTimeout(function(){
if(!$this.find(':focus').length) {
$this.removeClass('active').find('>ul').hide();
}
}, 1);
}
})
.delegate('a', {
focus : function(){
$(this).parent('li').mouseover();
}
});
};
$('div.gnb').xeMenu();
});
// Modal Window
jQuery(function($){