Javascriptのサブメニューの重複

Question

サブメニューは、あなたが「仕事」を選択した場合は重複しているように見える、その後

http://www.ogormanconstruction.co.uk/home

例えば「連絡先」は唯一のCSSを使用して、選択されたサブメニューを表示する方法はありますそうでなければクリックするまで残りを隠している？

あなたは、私が提供されたコードを使用してこれを実行する方法の例を使用できます：

Javascriptを

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#menu').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'}); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'}); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#services').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'}); 
}); 
</script> 

<div id="menu" class="menu clearfix"> 
    <div class="toggle">Work</div> 
    <div class="items"> 
    <ul> 
     <li><a href="http://www.ogormanconstruction.co.uk/basingstoke-treatment-works">Basingstoke Treatment Works</a></li> 
     <li><a href="">Project Two</a></li> 
     <li><a href="">Project Three</a></li> 
     <li><a href="">Project Four</a></li> 
     <li><a href="">Project Five</a></li> 
     <li><a href="">Project Six</a></li> 
    </ul> 
</div> 
</div> 

<div id="menu2" class="menu clearfix"> 
    <div class="toggle">Contact</div> 
    <div class="items"> 
    <ul> 
     <li>Mick O'Gorman<br /><a href="mailto:mick@ogormanconstruction.co.uk">mick@ogormanconstruction.co.uk</a><br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br /><a href="mailto:barry@ogormanconstruction.co.uk">barry@ogormanconstruction.co.uk</a><br />+44(0) 7515 569 086</li> 
    </ul> 
</div> 
</div> 

<div id="services" class="menu clearfix"> 
    <div class="toggle">Services</div> 
    <div class="items"> 
    <ul> 
     <li><a href="http://www.ogormanconstruction.co.uk/site-logistics">Site Logistics</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/waste-management">Waste Management</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/security-services">Security Services</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/traffic-management">Traffic Management</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/multi-service-gangs">Multi Service Gangs</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/facilities">Facilities & Accommodation</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/small-works-maintenance">Small Works & Maintenance</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/catering-services">Catering Services</a></li> 
    </ul> 
</div> 
</div> 

CSS、それができるように、プラグインは、他の.items探している

#menu { 
    position: relative; 
    top: 435px; 
    left: -15px; 
    width: 60px; 
    height: 25px; 
} 

#menu2 { 
    position: relative; 
    top: 445px; 
    left: -15px; 
    width: 60px; 
} 

#services { 
    position: relative; 
    top: 428px; 
    left: -15px; 
    width: 60px; 
} 

.menu .items a:hover { 
    text-decoration: none; 
} 

.menu .items a { 
    font-size: 11px; 
    color: #ABA099; 
    text-decoration: none; 
} 

.menu .items { 
    left: 180px; 
    width: 250px !important; 
} 

.menu .items li { 
    width: 250px; 
    line-height: 19px; 
    font-size: 11px; 
    color: #ABA099; 
    height: 19px; 
} 

.menu .items li a:hover { 
    color: #4D4D4F; 
} 

.menu .toggle { 
    color: #ABA099; 
    font-weight: normal; 
} 

.menu .toggle-hover { 
    color: #4D4D4F; 
} 

Answer 1

をプラグインを呼び出しているメニュー内でそれらを非表示にします。したがって、1つのdiv内のすべてのメニューをラップしてrb_menu()を実行すると、おそらく動作しますその上に。例：

$('#menu-wrapper').rb_menu({ 
    triggerEvent: 'click', 
    hideOnLoad: true, 
    loadHideDelay: 0, 
    autoHide: false, 
    transition: 'swing' 
});