就在几天前,我有一个伟大的脚本,基本上允许我的静态网站的菜单项缩小和扩大取决于菜单中有多少列表项。现在我已经开始将网站转换为Wordpress安装,并且遇到问题,因为我不熟悉Javascript。Jquery静态菜单到Wordpress菜单
它不会运行脚本,只是基本的WordPress的PHP。
这是脚本:
$(document).ready(function() {
li_count = $('#main-navigation li').length;
div_size = $('#main-navigation').width();
new_li_font_size = (div_size/10)/li_count+'px';
new_li_width = 100/li_count+'%';
$('#main-navigation li').css('font-size', new_li_font_size);
$('#main-navigation li').css('width', new_li_width);
console.debug(new_li_size);
});
这是我以前导航:
<nav id="main-navigation">
<ul>
<li><a href="index.html">Hjem</a></li>
<li><a href="butikker-single.html">Butikker</a></li>
<li><a href="kampanjer.html">Kampanjer</a></li>
<li><a href="#">Åpningstider</a></li>
<li><a href="#">Om torvgårdens ting og tang</a></li>
</ul>
</nav><!-- END #main-navigation -->
这是我当前NAV:
<nav id="main-navigation" role="navigation">
<ul>
<?php wp_nav_menu(array('theme_location' => 'header-menu')); ?>
</ul>
</nav><!-- END #main-navigation -->
我一直在看脚本,我认为它可能与事实有关,在PHP中没有更多的li标签,但我可能是错的,考虑到我没有使用jQuery的经验。有人能帮助我吗? :)
以防万一,这里是我把我的头的jQuery的实现:
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/menu.js"></script>
迈克尔
为什么不保留父包装的宽度'auto',而没有任何固定的宽度? – 2013-03-15 12:22:42
@SheikHeera,我不认为字体大小会改变,如果我这样做。在某些情况下,菜单项太多,酒吧会重叠设定的宽度,对吧? – michaelw90 2013-03-15 12:27:11
你正在做什么? – 2013-03-15 12:28:28