如同下圖,頂級菜單和子菜單分開輸出,但wordpress默認輸出的結(jié)構(gòu)是把子菜單輸出到頂級菜單內(nèi),如何分開輸出頂級菜單和子菜單(或者說讓子菜單和頂級菜單同級)
<ul>
<li>
<a>頂級菜單</a>
<ul class="sub-menu">
<li>子菜單</li>
<li>子菜單</li>
<li>子菜單</li>
</ul>
</li>
</ul>
上面為wordpress默認的菜單結(jié)構(gòu)
上圖演示地址
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>jquery仿騰訊云下拉導(dǎo)航</title>
<link media="screen" rel="stylesheet" href="demo.css"/>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var qcloud={};
$('[_t_nav]').hover(function(){
var _nav = $(this).attr('_t_nav');
clearTimeout( qcloud[ _nav + '_timer' ] );
qcloud[ _nav + '_timer' ] = setTimeout(function(){
$('[_t_nav]').each(function(){
$(this)[ _nav == $(this).attr('_t_nav') ? 'addClass':'removeClass' ]('nav-up-selected');
});
$('#'+_nav).stop(true,true).slideDown(200);
}, 150);
},function(){
var _nav = $(this).attr('_t_nav');
clearTimeout( qcloud[ _nav + '_timer' ] );
qcloud[ _nav + '_timer' ] = setTimeout(function(){
$('[_t_nav]').removeClass('nav-up-selected');
$('#'+_nav).stop(true,true).slideUp(200);
}, 150);
});
});
</script>
</head>
<body>
<p class="head-v3">
<p class="navigation-up">
<p class="navigation-inner">
<p class="navigation-v3">
<ul>
<li class="nav-up-selected-inpage" _t_nav="home">
<h2>
<a >首頁</a>
</h2>
</li>
<li class="" _t_nav="product">
<h2>
<a >云產(chǎn)品</a>
</h2>
</li>
<li class="" _t_nav="wechat">
<h2>
<a >微信建站</a>
</h2>
</li>
<li class="" _t_nav="solution">
<h2>
<a >行業(yè)解決方案</a>
</h2>
</li>
<li class="" _t_nav="cooperate">
<h2>
<a >合作伙伴</a>
</h2>
</li>
<li _t_nav="support">
<h2>
<a >幫助與支持</a>
</h2>
</li>
</ul>
</p>
</p>
</p>
<p class="navigation-down">
<p id="product" class="nav-down-menu menu-1" style="display: none;" _t_nav="product">
<p class="navigation-down-inner">
<dl style="margin-left: 100px;">
<dt>計算機與網(wǎng)絡(luò)</dt>
<dd>
<a hotrep="hp.header.product.compute1" >云服務(wù)器</a>
</dd>
<dd>
<a hotrep="hp.header.product.compute2" >彈性Web引擎</a>
</dd>
<dd>
<a hotrep="hp.header.product.compute3" >負載均衡</a>
</dd>
</dl>
<dl>
<dt>存儲與CDN</dt>
<dd>
<a hotrep="hp.header.product.storage1" >云數(shù)據(jù)庫</a>
</dd>
<dd>
<a hotrep="hp.header.product.storage2" >NoSQL高速存儲</a>
</dd>
<dd>
<a hotrep="hp.header.product.storage4" >對象存儲服務(wù)(beta)</a>
</dd>
<dd>
<a hotrep="hp.header.product.storage3" >CDN</a>
</dd>
</dl>
<dl>
<dt>監(jiān)控與安全</dt>
<dd>
<a hotrep="hp.header.product.monitoring1" >云監(jiān)控</a>
</dd>
<dd>
<a hotrep="hp.header.product.monitoring2" >云安全</a>
</dd>
<dd>
<a hotrep="hp.header.product.monitoring3" >云撥測</a>
</dd>
</dl>
<dl>
<dt>數(shù)據(jù)分析</dt>
<dd>
<a hotrep="hp.header.product.analysis1" >騰訊云分析</a>
</dd>
<dd>
<a hotrep="hp.header.product.analysis2" >關(guān)鍵因子</a>
</dd>
</dl>
<dl>
<dt>開發(fā)者工具</dt>
<dd>
<a hotrep="hp.header.product.devtool1" >移動加速</a>
</dd>
<dd>
<a hotrep="hp.header.product.devtool2" >應(yīng)用加固</a>
</dd>
<dd>
<a hotrep="hp.header.product.devtool3" >信鴿推送</a>
</dd>
</dl>
<dl>
<dt>開發(fā)者服務(wù)</dt>
<dd>
<a hotrep="hp.header.product.service1" >安全認證服務(wù)</a>
</dd>
<dd>
<a hotrep="hp.header.product.service2" >域名備案</a>
</dd>
</dl>
</p>
</p>
<p id="solution" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="solution">
<p class="navigation-down-inner">
<dl style="margin-left: 380px;">
<dd>
<a class="link" hotrep="hp.header.solution.1" >微信</a>
</dd>
</dl>
<dl>
<dd>
<a class="link" hotrep="hp.header.solution.2" >游戲</a>
</dd>
</dl>
<dl>
<dd>
<a class="link" hotrep="hp.header.solution.3" >移動應(yīng)用</a>
</dd>
</dl>
</p>
</p>
<p id="support" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="support">
<p class="navigation-down-inner">
<dl style="margin-left: 610px;">
<dd>
<a class="link" hotrep="hp.header.support.1" >資料庫</a>
</dd>
</dl>
<dl>
<dd>
<a class="link" hotrep="hp.header.support.2" >論壇</a>
</dd>
</dl>
<dl>
<dd>
<a class="link" hotrep="hp.header.support.3" >億元扶持</a>
</dd>
</dl>
</p>
</p>
<p id="cooperate" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="cooperate">
<p class="navigation-down-inner">
<dl style="margin-left: 480px;">
<dd>
<a hotrep="hp.header.partner.1" >代理商</a>
</dd>
</dl>
<dl>
<dd>
<a hotrep="hp.header.partner.2" >微信服務(wù)商</a>
</dd>
</dl>
<dl>
<dd>
<a hotrep="hp.header.partner.3" >創(chuàng)投機構(gòu)</a>
</dd>
</dl>
</p>
</p>
</p>
</p>
</body>
</html>
走同樣的路,發(fā)現(xiàn)不同的人生
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號