Изменить макет меню на определенную ширину адаптивного дизайна WordPress
Я разрабатываю адаптивную тему WordPress.
На обычном компьютере (полноразмерном) меню выглядит следующим образом:
<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 для определенной ширины установить "header-menu" в скрытое... и сделать "header-menu-mobile" установленным в видимый. Я немного устал в голове, и, возможно, есть лучшее решение, чтобы сделать эту работу.
Есть идеи как?
С наилучшими пожеланиями, Йохан
2 ответа
Ты прав насчет своего 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) { ... }
Пытаться $_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;
могу сказать вам пользовательскую платформу