更改特定宽度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

回答

相关问题