2013-11-26 1 views
0

Я разрабатываю один отзывчивый веб-сайт Wordpress. но теперь я сталкиваюсь с проблемой проблем меню. см. ниже рисунок для моей навигации. на верхней черной полосе «Проверьте наш город» будет выпадающее меню и на синей полоске О нас также выпадающего менюкак вызвать базу данных html/php на разрешение экрана

enter image description here

так я хочу, когда разрешение ниже 800, то в верхнем меню экрана и Часть логотипа будет отличаться. Я знаю один способ, как я могу сделать отдельную часть заголовка, а затем скрыть его через css и вызвать его с помощью запроса css media. для этого мне нужно всегда держать этот код в теле. но я не хочу, я хочу, чтобы код был в теле только тогда, когда это было необходимо.

сказать, если сделать верхнюю область отдельного файла html/php, если я могу назвать это, когда разрешение экрана будет 800/480 и т. Д., Что будет работать, я думаю. я могу быть возможен через php/js, но я понятия не имею, как это сделать.

см. Изображение есть две части для навигации одна черная область, а другая - синяя область. когда я буду ниже 800px, это будет все меню в одной папке.

см сильфона меню я хочу этот тип, когда разрешение экрана ниже 800px

enter image description here

+0

Как насчет Bootstrap? http://getbootstrap.com/ http://stackoverflow.com/questions/4180134/how-to-get-users-screen-resolution-with-php http://stackoverflow.com/questions/1504459/getting -the-screen-resolution-using-php –

+0

@TrinhHoangNhu Итак, Bootstrap - это новый jQuery? OP: попробуйте использовать существующие элементы. Можете ли вы масштабировать свой логотип с помощью CSS? Не могли бы вы использовать спрайт? – Gant

+0

@TrinhHoangNhu спасибо .. я не экспатт на bootstrap, но я думаю, что bootstrap не может включать два nav на один drop dwon. Я думаю, что я хочу, чтобы мне нужно было отделиться .. но я не уверен .. идея приветствуется –

ответ

0

Я думаю, что единственный способ добиться этого заключается в использовании Ajax. Отправьте пустую страницу клиенту, проверьте размер окна и запросите содержимое через ajax с шириной экрана в качестве параметра.

+0

i нет проблем с вызовом через ajax, но я еще не знаю, как это сделать. –

1

Я бы не рекомендовал ajax загрузить 2 navs. Он добавляет дополнительный HTTP-запрос, который медленнее, чем просто предоставление как настольных, так и мобильных устройств небольшого количества дополнительной разметки.

Я думаю, что использование медиа-запросов - ваш лучший подход.

Это то, что я думаю, что вы пытаетесь TODO: http://jsfiddle.net/krismeister/CNr5y/

relevevant часть является @media screen and (min-width:800px){

+0

спасибо. да, если я не могу сделать какой-либо другой способ, а затем использовать медиа-запрос, но лично я не добавляю лишний код на тело. –

+0

heres one без дополнительной разметки: http://jsfiddle.net/krismeister/CNr5y/1/ он использует nav: прежде чем добавлять какой-либо мобильный контент. – LessQuesar

+0

спасибо Меньше ... его хорошая идея тоже –

0

я не так хорошо на JQuery и JSON .. вы пыльник способ может работать?

$(function() { 
    $.post('some_script.php', { width: 800px }, function(json) { 
     if(json.outcome == 'success') { 
      header-800px.php; 
     } else { 
      header.php; 
     } 
    },'json'); 
}); 

исх: Getting the screen resolution using PHP