更改特定寬度repsonsive設計的菜單佈局WordPress

我正在開發一個響應式WordPress主題。更改特定寬度repsonsive設計的菜單佈局WordPress

在常規計算機（全尺寸）的菜單是visiblie像：

<div id="header-menu" role="complementary">  
    <ul> 
     <?php wp_list_pages('title_li=&depth=1&link_before=<span>&link_after=</span>'); ?> 
    </ul> 
</div>

在一定寬度（用於移動設備和片劑我想與像這樣的一個菜單來替代該菜單：

<div id="header-menu-mobile" role="complementary"> 
     <form action="<?php bloginfo('url'); ?>" method="get"> 
     <?php 

     $args1e = array(
     'depth'   => 1, 
     'child_of'   => 0, 
     'selected'   => 0, 
     'echo'    => 1, 
     'name'    => 'page_id'); 

     wp_dropdown_pages($args1e); ?> 

     </form> 
    <script type="text/javascript"><!-- 
    var dropdown = document.getElementById("page_id"); 
    function onCatChange() 
    { 
     if (dropdown.options[dropdown.selectedIndex].value > 0) 
     { 
      location.href = "<?php echo get_option('home'); 
      ?>/?page_id="+dropdown.options[dropdown.selectedIndex].value; 
     } 
    } 
    dropdown.onchange = onCatChange; 
    --></script> 
</div>

我可以在CSS一定寬度設置「標題菜單」隱藏......並作出「頭菜單的移動」設置爲可見我在我的頭有點累了，可能有更好的解決方案來完成這項工作。

任何想法如何？

親切的問候約翰

來源

2013-08-22 Johan Ndiyo Linnarsson

你是對你的想法CSS 。堅持下去。使用這個標準的CSS結構，使您的網站響應。

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Landscape phones and down */ 
@media (max-width: 480px) { ... }

來源

2013-08-22 12:23:47

謝謝。我會堅持下去！你提到的媒體查詢來自Twitter Boostrap？我討厭一些其他查詢寬度，但這些似乎工作得很好，所以我改變了這些。我只加了：@media（max-width：480px）和（orientation：landscape）。 –

是的，賓果。你是對的。這是從twitter引導。 –

嘗試$_SERVER['HTTP_USER_AGENT']; 它會告訴你有關用戶的操作系統和瀏覽器。您可以在幀代碼相應例子 -

if $_SERVER['HTTP_USER_AGENT'] == 'win 8' 
echo $menu_for_windows ; 
else if $_SERVER['HTTP_USER_AGENT'] =='opera mini' 
echo $menu_for_mobile

等..

也

$browser = get_browser(null, true); 
echo $browser['platform'] ; exit;

可以告訴你的用戶平臺

來源

2013-08-22 12:08:08 codepixlabs

不錯的想法..但是這不是一個問題，有這麼多的設備在那裏添加他們全部和未來的設備呢？ –

更改特定寬度repsonsive設計的菜單佈局WordPress

回答

相關問題