WordPress教程

网站导航怎么实现上面中文下面英文

也想出现在这里?联系我们
创客云

通常的网站导航栏目是纯中文或者纯英文,这种比较简单,只要直接调用网站后台设置的导航菜单即可。也有一些网站的导航菜单比较特殊,每个栏目上面是中文,下面是英文如下图:
网站导航怎么实现上面中文下面英文
这种导航菜单是无法直接在后台进行设置的。那么怎么制作这种上面中文下面英文的导航菜单呢?下面以 WordPress 网站为例介绍一下实现方法。(其它网站方法一样)

第一步:还是按正常的纯中文的导航菜单调用代码来调用出纯中文的导航菜单;

也想出现在这里?联系我们
创客主机
  1. <?php wp_nav_menu( array( 'theme_location' =>'topmenu','container' => '','menu_class' => 'topnav','menu_id' => 'topmeau','depth' => 1, ) ); ?>

第二步:在导航代码下面,创建一个 DIV,用于存放英文栏目内容,但把它设置为隐藏;

  1. <?php $naven = $general_options['naven'] ? $general_options['naven'] : array(); ?>
  2. <nav id="ennav" style="display:none">
  3. <?php for($i=0;$i<count($naven);$i++){
  4. echo '<li>'.$naven[$i].'</li>';
  5. }
  6. ?>

注意:我这里使用的是循环调用后台的设置项,如果你网站没有后台设置项,可以直接将英文栏目名写在 li 标签里面;

第三步:使用 JQUERY 的 append()函数,将英文菜单的每一个 LI 里面的内容追加到纯中文导航菜单里,一一对应;

  1. <script>
  2. //循环追加动态元素
  3. var nll= $('.topnav>li').length;
  4. for(var i=1;i<=nll;i++){
  5. var naven=$('#ennav li:nth-child('+i+')').text();
  6. $('.topnav>li:nth-child('+i+')>a').append('<span>'+naven+'</span>');
  7. }
  8. </script>

这样我们网站的导航菜单就会出现上面中文下面英文的效果了。

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!