我想创建一个移动网站，我试图让我的导航适应屏幕大小。导航的 HTML 结构将会改变，我知道我可以使用 CSS 和 @MEDIA 调用。但是，它不适用于我的情况，因为我使用的是ZURB框架中的 Foundation，我需要将元素从 UL 更改为 DD 或 DL 等。
我环顾了几个来源，我发现因为 PHP 在我的 AJAX 准备好之前首先加载，我无法让我的导航在移动设备上正确显示。
我需要一些方法来检测我的屏幕尺寸并将该值传达给我在 Joomla 中的 PHP 菜单生成函数。
我尝试了以下方法：
window.onload = function(){
var height = $(window).height();
var width = $(window).width();
$.ajax({
type: "POST",
url: '',
data: {
"height": height,
"width": width
},
success: function (data) {
},
});
}
mod_menu 示例：
<?php
require_once('FirePHPCore/FirePHP.class.php');
$firephp = FirePHP::getInstance(true);
ob_start();
$width = $_POST['width'];
$firephp->group('Test Group');
$firephp->log('Width');
$firephp->log($width);
$firephp->groupEnd();
?>
if ($width > 767) {
?>
<!-- The class on the root UL tag was changed to match the Foundation nav style -->
<ul class="nav-bar<?php echo $params->get('class_sfx');?>"<?php
$tag = '';
if ($params->get('tag_id')!=NULL) {
$tag = $params->get('tag_id').'';
echo ' id="'.$tag.'"';
}
?>>
<?php
foreach ($list as $i => &$item) :
$id = '';
if($item->id == $active_id)
{
$id = ' id="current"';
}
$class = '';
if(in_array($item->id, $path))
{
$class .= 'current ';
}
if($item->deeper) {
$class .= 'parent ';
}
$class = ' class="'.$class.'item'.$item->id.'"';
echo '<li'.$id.$class.'>';
// Render the menu item.
switch ($item->type) :
case 'separator':
case 'url':
case 'component':
require JModuleHelper::getLayoutPath('mod_menu', 'default_'.$item->type);
break;
default:
require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
break;
endswitch;
// The next item is deeper.
if ($item->deeper) {
echo '<ul>';
}
// The next item is shallower.
elseif ($item->shallower) {
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
}
// The next item is on the same level.
else {
echo '</li>';
}
endforeach;
?></ul>
<?php } ?>
然后我使用 if 条件检查屏幕宽度并选择导航类型。一种导航使用 UL 结构，另一种必须使用 DL DD 结构。
我使用 FirePHP 来查看页面如何加载，我的导航没有显示，因为 PHP 在 Ajax 准备好之前首先加载，所以我看不到我的导航。我需要我的 PHP 等到 Ajax 准备好或页面的一部分等待。我不知道从这里去哪里。
我正在查看 Joomla MooTools，不确定是否可以利用它在页面加载之前等待 Ajax 加载。
我知道，有更简单的方法，比如在 Joomla 中制作一个全新的菜单项或在 Joomla 中隐藏一些东西以使其工作，但我想要一种更干净优雅的方式。
如果有人有任何代码示例。请发帖。