不需要很多頁面的側面菜單

所以我有一個我正在開發的佈局系統，它允許用戶點擊側面菜單上的鏈接來訪問一些服務。所以基本上這裏是簡單的HTML設計不需要很多頁面的側面菜單

 <div class="col-md-2" id="admin_menu"> 
      <section class="list-group"> 
       <a href="#" class="list-group-item">opt 1</a> 
       <a href="#" class="list-group-item">opt 2</a> 
       <a href="#" class="list-group-item">opt 3</a> 
       <a href="#" class="list-group-item">Opt 4</a> 
      </section> 
     </div> 
     <div class="col-md-10" id="admin_content"> 
      <section class=""> 
       Some content 
      </section> 
     </div>

的佈局工作，我希望它。一個小菜單在左邊，主要內容在右邊。但我有一個設計小問題。正如你所看到的內容都在一個頁面上。當用戶點擊opt2,3,4鏈接時，他或她將被重定向到相應的頁面，該頁面也將包含側面菜單。所以我的問題是

什麼是最便捷的方式/方法來創建這樣的設計，其菜單需要在多個接口。
考慮到大多數可能會重新加載整個頁面，我如何使活動鏈接更改顏色。

這是設計圖片。第一個鏈接顯示的是主用鏈路應該有

來源

2014-07-26 John Kariuki

include "menu.php";

而且menu.php包含菜單的樣式。

還與

require_once "menu.php";

作品問題二，給每個項目的唯一numbereid（listitem1, listitem2...），並在頁面上本身創建一個樣式標籤：

<style> 
    #listitem1 { 
     whatever... 
    } 
</style>

根據不同的頁面上。

來源

2014-07-26 20:40:14

和關於問題2兩個？ –

@JohnKariuki編輯答案。這對你有用嗎？ –

嗯。有趣。將在幾個 –

你可以試試這個代碼，我給你安排：

1）首先你可以在代碼中添加一些ID以獨特的方式來識別每一個環節 2）第二你只需要添加一些jQuery代碼到底的代碼的主體是這樣的想法是，當你通過鏈接發送鼠標它會改變顏色，你可以自己指定顏色，當鼠標不在時它再次改變顏色嘗試我只做了前3鏈接，但你可以做到很多鏈接，當你明白了。

<div class="col-md-2" id="admin_menu"> 
      <section class="list-group"> 
       <a href="#" id="first" class="list-group-item">opt 1</a> 
       <a href="#" id="second" class="list-group-item">opt 2</a> 
       <a href="#" id="third" class="list-group-item">opt 3</a> 
       <a href="#" class="list-group-item">Opt 4</a> 
      </section> 
     </div> 
     <div class="col-md-10" id="admin_content"> 
      <section class=""> 
       Some content 
      </section> 
     </div> 




<script> 
$(document).ready(function(){ 
    $("#first").mouseover(function() { 
    $("#first").css({ 
'color':'red' 
}); 
}); 

    $("#first").mouseout(function() { 
    $("#first").css({ 
'display':'lightgray' 
}); 
}); 
}); 


$(document).ready(function(){ 
    $("#second").mouseover(function() { 
    $("#second").css({ 
'color':'blue' 
}); 
}); 

    $("#second").mouseout(function() { 
    $("#second").css({ 
'display':'lightgray' 
}); 
}); 
}); 


$(document).ready(function(){ 
    $("#third").mouseover(function() { 
    $("#third").css({ 
'color':'yellow' 
}); 
}); 

    $("#third").mouseout(function() { 
    $("#third").css({ 
'display':'lightgray' 
}); 
}); 
}); 

</script>

來源

2014-07-26 22:16:39

作爲@Faried說，你可以將菜單包括在主頁面。至於第二個問題，你可以使用

<?php if(isset($_GET['page']) && $_GET['page']=="pageName") 
{ 
//style for active link 
} else 
{ 
//non-active style 
}

來源

2014-07-26 22:17:58 user3458600

不需要很多頁面的側面菜單

回答

相關問題