如何使用WordPress类别创建自动多色MegaMenu

时间：2011-04-24 作者：Downloadtaky

我正在寻找一个关于如何在wordpress上为类别创建多色菜单的易于使用的分步指南。

实际上，在我的博客中，我有10/12个“主要”类别，其中一些有50个子类别，我会添加更多，所以我需要一些自动的东西来在我的菜单中显示它们。事实上我有一个，但它充满了错误。所以我需要一些新的东西。

这是我的CSS（你也可以从头开始写，也许更好：P）

.videoCssMenucontainer {margin: 2px 0 0;}
UL.ws_css_cb_menu {background-color : #7F9DB9;width : 96%;margin:0 1.75% 10px 1.75%;font : bold 13px Arial, Helvetica, sans-serif;display : block;float : left;height : 33px;border-top-right-radius : 0;border-bottom-right-radius : 10px;border-bottom-left-radius : 10px;border-top-left-radius : 0;position:relative;z-index:10000;}
UL.ws_css_cb_menu LI {display : block;margin : 2px 0 0 2px;float : left;}
UL.ws_css_cb_menu A:hover UL, UL.ws_css_cb_menu A:hover A:hover UL, UL.ws_css_cb_menu A:hover A:hover A:hover UL {display : block;}
UL.ws_css_cb_menu A {display : block;vertical-align : middle;border-width : 0;border-color : #6655ff;border-style : solid;padding : 2px;color : #444444;text-decoration : none;text-align : left;}
UL.ws_css_cb_menu SPAN {overflow : hidden;}
UL.ws_css_cb_menu LI A:hover, UL.ws_css_cb_menu LI A {padding : 9px;color : #763319;}
UL.ws_css_cb_menum LI A:hover, UL.ws_css_cb_menum LI A {padding : 4px;font-weight : normal;color : #000;}
UL.ws_css_cb_menu UL {position : absolute;left : -1px;top : 98%;width : 160.65px;background-color : #ffffff;}
UL.ws_css_cb_menu UL UL {position : absolute;left : 98%;top : -2px;}
UL.ws_css_cb_menu, UL.ws_css_cb_menu UL {margin : 0;list-style : none;padding : 0 2px 2px 0;}
UL.ws_css_cb_menu A:active, UL.ws_css_cb_menu A:focus {outline-style : none;}
UL.ws_css_cb_menu UL LI {float : left;width : 150px;}
UL.ws_css_cb_menu UL A {white-space : nowrap;text-align : left;}
UL.ws_css_cb_menu LI:hover {position : relative;}
UL.ws_css_cb_menu LI:hover > A {background-color : #fff;color : #000;border-color : #665500;border-style : solid;text-decoration : none;}
UL.ws_css_cb_menu LI A:hover {position : relative;background-color : #fff;color : #000;text-decoration : none;border-color : #665500;border-style : solid;}
UL.ws_css_cb_menum LI A:hover {background-color : #ffc000;}
UL.ws_css_cb_menu IMG {border : none;float : left;margin-right : 4px;width : 16px;height : 16px;}
UL.ws_css_cb_menu UL IMG {width : 16px;height : 16px;}
UL.ws_css_cb_menu UL, UL.ws_css_cb_menu A:hover UL UL {display : none;z-index : 99999;}
UL.ws_css_cb_menu LI:hover > UL {display : block;}
UL.ws_css_cb_menu SPAN {display : block;padding-right : 11px;background-position : right center;background-repeat : no-repeat;}
UL.ws_css_cb_menu LI A TABLE, UL.ws_css_cb_menu LI A:hover TABLE {border-collapse : collapse;margin : -4px 0 0 -9px;border : 0 solid #000000;padding : 0;}
UL.ws_css_cb_menu LI A TABLE TR TD, UL.ws_css_cb_menu LI A:hover TABLE TR TD {padding : 0;border : 0 solid #000000;}
UL.ws_css_cb_menu LI A TABLE UL, UL.ws_css_cb_menu LI A:hover TABLE UL {border-collapse : collapse;padding : 0;margin : -4px 0 0 -9px;}
UL.videoCssMenu {font-size : 13px;width : 96%;margin:0 1.75% 10px 1.75%;background : #7F9DB9;color:#FFF;text-shadow: rgba(0, 0, 0, 0.398438) 1px 1px 1px;border : 0 solid #000000;}
UL.videoCssMenu .videoMenuTitleImage {margin : -2px 0 0 -2px;width : 79px;height : 30px;}
UL.videoCssMenu UL {left : 0;background-color : #857DA2;width : 430px;}
UL.videoCssMenu LI A {color:#FFF;text-shadow: rgba(0, 0, 0, 0.398438) 1px 1px 1px;padding: 5px !important;text-transform:uppercase;}
UL.videoCssMenu UL LI A {overflow: hidden; float:left;}
UL.videoCssMenu UL LI {width : auto;float : left;height : 27px;}
UL.videoCssMenu LI:hover > A, UL.videoCssMenu LI A:hover {background-color : #ffffff;border-radius : 5px;border-color : #fff;padding : 5px !important ;color : #000;}
UL.videoCssMenu LI UL LI:hover > A, UL.videoCssMenu LI UL LI A:hover {background-color : #ecb899;border-color : #fff;padding : 5px;color : #000;}
ul.ws_css_cb_menu ul ul ul{background:#ccc;color:#142E51;text-shadow:1px 1px 1px #000;}
ul.ws_css_cb_menu ul ul ul a{color:#142E51;text-shadow:1px 1px 1px #000;}
.ws_css_cb_menum LI {width:auto;height:20px;}
这是我的HTML/PHP：

<ul class="ws_css_cb_menu videoCssMenu">
    <li><a href="http://downloadtaky.info" title="Downloadtaky.info | Download FREE Film IPA Serie TV">Home</a></li>
    <li>
        <a href="#">Categorie</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class=\'ws_css_cb_menum\'>
            <?php wp_list_categories(\'sort_column=name&sort_order=name&style=list&children=true&hierarchical=true&title_li=0&dept=5&show_count=1&feed_image=/images/RSS.png\'); ?>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
        <a href="#">Pagine</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class=\'ws_css_cb_menum\'>
            <?php wp_list_pages(\'title_li=\'); ?>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
        <a href="#">Hack</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class=\'ws_css_cb_menum\'>
            <li><a href="http://proxy.downloadtaky.info">Proxy</a></li>
            <li><a href="http://hide.downloadtaky.info/">Url Hider</a></li>
            <li><a href="http://html2bbcode.downloadtaky.info">HTML 2 bbCode Converter</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
        <a href="#">Seo</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class=\'ws_css_cb_menum\'>
            <li><a href="http://pagerank.downloadtaky.info/">Pagerank</a></li>
            <li><a href="http://seo.downloadtaky.info/">FREE Seo Services</a></li>
            <li><a href="http://submit.downloadtaky.info/">Url Submitter</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
        <a href="#">Servizi CSS</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class=\'ws_css_cb_menum\'>
            <li><a href="http://buttongenerator.downloadtaky.info/">CSS Button Generator</a></li>
            <li><a href="http://favicon.downloadtaky.info/">Favicon Generator</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
        <a href="#">Generatori Link Premium FREE</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class=\'ws_css_cb_menum\'>
            <li><a title="Megavideo Unlocker, supera il limite di Megavideo" href="http://www.premiummu.com/megavideounlocker.php">Supera il limite di Megavideo</a></li>
            <li><a title="Fileserve, Megaupload,Uploading FREE Premium Link Generator" href="http://www.premiummu.com/premiumlinkgenerator.php">Premium link generator</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <?php include(\'supsearch.php\');?>
</ul>
我不再关心IE6了，IE7的支持就足够了，谢谢大家的帮助！

1 个回复
最合适的回答,由SO网友:fuxia 整理而成

您正在重载分类法category. 学会使用custom taxonomies. 您的一些类别实际上是系列，其他类别也属于自己的分类法。

更换硬编码导航ul 使用nav menu 再看看第二十个主题：它为你的问题提供了一个有效的解决方案。您可以使用own walker 进一步调整。

但是，让你的网站看起来更专业的第一步是：放弃漫画

结束
标签： categories   menus   css   小码农  

相关推荐

无法调用WordPress管理员的外部样式表(使用wp_admin_css)？

我尝试了以下方法：<?php function my_wp_admin_css() { echo \'<link rel=\"stylesheet\" href=\"/wp-content/plugins/custom-admin-style/wp-admin.css\" type=\"text/css\" />\'; } add_action(\'wp_admin_css\',\'my_wp_admin_css\');