使用DIV容器的導航菜單

如何定義默認情況下應該在「menu1」下面顯示「submenu11」的內容？使用DIV容器的導航菜單

<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 

<body> 
     <ul id="css3menu1" class="menu"> 
     <li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a> 
       <ul> 
        <li><a href="#submenu11">SUBMENU11</a></li> 
        <li><a href="#submenu12">SUBMENU12</a></li> 
        <li><a href="#submenu13">SUBMENU13</a></li> 
        <li><a href="#submenu14">SUBMENU14</a></li> 
       </ul></li> 
       <li class="menu"><a href="#menu2" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/schedule.png"/>MENU2</a></li> 
       <li class="menu"><a href="#menu3" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/analysis.png"/>MENU3</a></li> 
       <li class="toplast"><a href="#menu4" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/gps.png"/>MENU4</a></li> 
      </ul> 

    <div id='submenu11'> 
    <p> Content </p> 
    </div> 

    <div id='submenu12'> 
    <p> Content </p> 
    </div> 

    <div id='submenu13'> 
    <p> Content </p> 
    </div> 

    <div id='submenu14'> 
    <p> Content </p> 
    </div> 

    <script> 
     $('ul.menu').each(function() { 
      var $active, $content, $links = $(this).find('a'); 
      $active = $links.first().addClass('active'); 
      $content = $($active.attr('href')); 
      $links.not(':first').each(function() { 
       $($(this).attr('href')).hide(); 
      }); 

      $(this).on('click', 'a', function(e) { 
       $active.removeClass('active'); 
       $content.hide(); 
       $active = $(this); 
       $content = $($(this).attr('href')); 
       $active.addClass('active'); 
       $content.show(); 
       e.preventDefault(); 
      }); 
     }); 
    </script> 
</body>

CSS樣式表：

html,body { 
    font: normal .8em/1.5em Arial, Helvetica, sans-serif; 
    background: #ffffff; 
    width: 100%; 
    margin: 0px auto; 
} 

p { 
    margin: 0 0 2em; 
} 

h1 { 
    margin: 0; 
    font:bold 12px Arial; 
} 

h2 { 
    margin:0; 
    color: #55aaff; 
    font:bold 12px Arial; 
} 

h3 { 
    margin:0; 
    font:normal 10px Arial; 
} 

h4 { 
    margin:0; 
    font:normal 12px Arial; 
} 

a { 
    color: #339; 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

div#header { 
    padding:1em; 
    background:#00557f 100% 10px no-repeat; 
    border-bottom:6px double gray; 
} 

div#header p { 
    font:normal 10px Arial; 
    text-align:right; 
    color:#b7ddf2; 
    margin:0; 
} 

div.scrollbar { 
    height: 300px; 
    overflow: auto; 
    border: solid 1px #000; 
    padding: 5px; 
} 

div#content { 
    padding:1em 1em 5em; /* bottom padding for footer */ 
} 

div#content p { 
    text-align:justify; 
    padding:0 1em; 
} 

div#footer { 
    position:absolute; 
    width:100%; 
    bottom:0; /* stick to bottom */ 
    padding:1em; 
    background:#ddd 98% 10px no-repeat; 
    border-bottom:6px double gray; 
} 
div#footer p { 
    font-style:italic; 
    font-size:1.1em; 
    margin:0; 
} 

/* ----------- Menu ----------- */ 
ul#css3menu1,ul#css3menu1 ul{ 
    margin:0; 
    list-style:none; 
    padding:0; 
    background-color:#dedede; 
    border-width:1px; 
    border-style:solid; 
    border-color:#b7ddf2; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
} 
ul#css3menu1 ul{ 
    display:none; 
    position:absolute; 
    left:0; 
    top:100%; 
    -moz-box-shadow:3.5px 3.5px 5px #000000; 
    -webkit-box-shadow:3.5px 3.5px 5px #000000; 
    box-shadow:3.5px 3.5px 5px #000000; 
    background-color:#FFFFFF;border-radius:6px; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-color:#d4d4d4; 
    padding:0 10px 10px; 
} 
ul#css3menu1 li:hover>*{ 
    display:block; 
} 
ul#css3menu1 li{ 
    position:relative; 
    display:block; 
    white-space:nowrap; 
    font-size:0; 
    float:left; 
} 
ul#css3menu1 li:hover{ 
    z-index:1; 
} 
ul#css3menu1{ 
    font-size:0; 
    z-index:999; 
    position:relative; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
} 
ul#css3menu1>li{ 
    margin:0; 
} 
* html ul#css3menu1 li a{ 
    display:inline-block; 
} 
ul#css3menu1 a:active, ul#css3menu1 a:focus{ 
    outline-style:none; 
} 
ul#css3menu1 a{ 
    display:block; 
    vertical-align:middle; 
    text-align:left; 
    text-decoration:none; 
    font:bold 12px Arial; 
    color:#000000; 
    text-shadow:#FFF 0 0 1px; 
    cursor:pointer; 
    padding:10px; 
    background-color:#ebf4fb; 
    background-image:url("mainbk.png"); 
    background-repeat:repeat; 
    background-position:0 0; 
    border-width:0 0 0 1px; 
    border-style:solid; 
    border-color:#C0C0C0; 
} 
ul#css3menu1 ul li{ 
    float:none; 
    margin:10px 0 0; 
} 
ul#css3menu1 ul a{ 
    text-align:left; 
    padding:4px; 
    background-color:#FFFFFF; 
    background-image:none; 
    border-width:0; 
    border-radius:0px; 
    -moz-border-radius:0px; 
    -webkit-border-radius:0px; 
    font:11px Arial; 
    color:#000; 
    text-decoration:none; 
} 
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{ 
    background-color:#b7ddf2; 
    border-color:#C0C0C0; 
    border-style:solid; 
    color:#000000; 
    text-decoration:none; 
    text-shadow:#FFF 0 0 1px; 
    background-position:0 100px; 
} 
ul#css3menu1 img{ 
    border:none; 
    vertical-align:middle; 
    margin-right:10px; 
} 
ul#css3menu1 img.over{ 
    display:none; 
} 
ul#css3menu1 li:hover > a img.def{ 
    display:none; 
} 
ul#css3menu1 li:hover > a img.over{ 
    display:inline; 
} 
ul#css3menu1 li a.pressed img.over{ 
    display:inline; 
} 
ul#css3menu1 li a.pressed img.def{ 
    display:none; 
} 
ul#css3menu1 span{ 
    display:block; 
    overflow:visible; 
    background-position:right center; 
    background-repeat:no-repeat; 
    padding-right:0px; 
} 
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{ 
    background-color:#b7ddf2; 
    background-position:0 100px; 
    border-style:solid; 
    border-color:#C0C0C0; 
    color:#000000; 
    text-decoration:none; 
    text-shadow:#FFF 0 0 1px; 
} 
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{ 
    background-color:#FFFFFF; 
    background-image:none; 
    color:#868686; 
    text-decoration:none; 
} 
ul#css3menu1 li.topfirst>a{ 
    border-radius:5px 0 0 5px; 
    -moz-border-radius:5px 0 0 5px; 
    -webkit-border-radius:5px; 
    -webkit-border-top-right-radius:0; 
    -webkit-border-bottom-right-radius:0; 
} 
ul#css3menu1 li.toplast>a{ 
    border-radius:0 5px 5px 0; 
    -moz-border-radius:0 5px 5px 0; 
    -webkit-border-radius:0; 
    -webkit-border-top-right-radius:5px; 
    -webkit-border-bottom-right-radius:5px; 
} 
/* --------- End of Menu --------- */

EDIT1：我包括腳本和樣式表。 enter image description here

編輯2：請看圖片。它應該澄清這個問題。

來源

2012-05-07 Klausos Klausos

什麼是您的服務器端語言，它是Asp.Net嗎？ – freebird

我從這個例子中使用JQuery：http://jsfiddle.net/pratik136/JgReZ/ 對不起，我是新手，不確定我完全理解你的問題。 –

其確實沒關係，我以爲你正在使用子菜單項上的頁面點擊，這就是爲什麼我問你。 – freebird

的問題是在這條線：

$active = $links.first().addClass('active');

它採用第一個鏈接在你的菜單，並使其處於活動狀態。在類菜單中的UL你的第一個<a>標籤是不是第一個菜單項，但：

<a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>

所以，你需要確保你的目標第一個菜單項。例如，您可以分配一個ID，它：

<li><a href="#submenu11" id="submenu-default">SUBMENU11</a></li>

，然後你必須重寫到該行的javascript：

$active = $('#submenu-default').addClass('active');

這應該做的伎倆。顯然，您可以使用任何其他方式來查找該鏈接。

編輯：也許更好的解決辦法是重寫你的HTML如下：

<ul id="css3menu1"> 
    <li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a> 
      <ul class="menu"> 
       <li><a href="#submenu11">SUBMENU11</a></li> 
       <li><a href="#submenu12">SUBMENU12</a></li> 
       <li><a href="#submenu13">SUBMENU13</a></li> 
       <li><a href="#submenu14">SUBMENU14</a></li> 
      </ul></li> 
      <li class="menu"><a href="#menu2" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/schedule.png"/>MENU2</a></li> 
      <li class="menu"><a href="#menu3" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/analysis.png"/>MENU3</a></li> 
      <li class="toplast"><a href="#menu4" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/gps.png"/>MENU4</a></li> 
     </ul>

這樣你就不必改變的JavaScript，在菜單中的第一個環節，現在確實是第一菜單項。我留給你找出最適合你的東西。

來源

2012-05-07 11:17:28 Laky

您的第二個解決方案效果很好。這正是我所期待的。第一種解決方案可能需要一些額外的努力才能使其工作，因爲子菜單的內容在這種情況下合併。 –

我只是對腳本進行了簡短的介紹，因此可能需要進行一些其他更改才能使第一個解決方案起作用。但我也是第二個粉絲的更大粉絲;）無論如何，我很高興它幫助你。 – Laky

我想你想是這樣的：http://www.cssmenus.co.uk/dropdown.html

如果你告訴一個例子或圖紙，我們可以幫助你更好的。

來源

2012-05-07 11:05:20 JohanB

不確定那個鏈接是什麼？ – freebird

@JohanB：我附加了更詳細的代碼示例。請讓我知道你是否也想看這張照片。 –

使用DIV容器的導航菜單

回答

相關問題