如何创建像《21世纪主题》中那样的下拉菜单?

时间:2011-09-14 作者:CodeVirtuoso

我非常喜欢二十一主题的下拉菜单解决方案:

http://twentyelevendemo.wordpress.com/

并想创建一个类似的,但我不知道它是如何工作的,或者它是基于一些现有的下拉菜单代码?

有没有可以使用的源代码,或者有人可以解释它背后的原理?

我知道互联网上充斥着js和非js解决方案,我甚至自己也做了一些,但我觉得这个菜单附近什么都没有,所以非常感谢您的帮助:)

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

我最近就是这么做的。不知道你有多先进,所以你可能已经知道一些这方面的知识了。

我发现this video 非常好(+这是第二部分)

我认为最早的一项研究是this

我想,211也使用superfish jquery plugin

正如另一张海报所提到的,您可以在主题文件中的某个地方找到211代码本身

SO网友:Jeremy Jared

下面是我用来开始我的项目的一个快速片段:

第一步是向函数中添加一些代码。php文件。这将启用WordPress自定义导航。完成后,控件将显示在“外观>菜单”中。Code for functions.php:

<?php
add_action( \'init\', \'register_my_menus\' );
function register_my_menus() {
register_nav_menus(
array(
    \'main\' => __( \'main\' ),
    \'secondary-menu\' => __( \'Secondary Menu\' ),
    ));
}
?>
上面的代码允许使用两个菜单。我将向您展示如何添加一个菜单,如果您愿意,可以使用相同的方法在任何地方添加第二个菜单。

下一步是将代码添加到标头。php文件。请注意,数组中的第一个菜单标记为main。这是我们将用来在标题中放置菜单的内容。php。

Here is the code for the header.php:

<div id="menu" class="menu-center">
    <?php wp_nav_menu( array( \'theme_location\' => \'main\' ) ); ?>
</div>
这应该放在<div id="header"> div(它不是强制性的,但是代码最常见的位置。

最后一步是添加一些CSS来设置菜单样式,并将其设置为“下拉”,而不是一堆多级链接。

The CSS code:

ul.menu,ul.menu ul,ul.menu li,ul.menu a {
display:block;
margin:0;
padding:0;
}

ul.menu ul {
display:none;
}
ul.menu li:hover {
z-index:999;
}
ul.menu li:hover > ul {
display:block;
position:absolute;
float:left;
}
ul.menu li {
float:left;
width:auto;
}
ul.menu ul li {
float:left;
width:190px;
}
ul.menu ul li ul {
float:left;
width:190px;
position:absolute;
left:100%;
top:0;
}
ul.menu-ver,ul.menu-ver ul {
width:14em;
}

div.menu-center ul.menu {
float:left;
position:relative;
left:50%;
}

div.menu-center ul.menu li {
position:relative;
left:-50%;
}

div.menu-center ul.menu li li {
left:auto;
}


ul.menu li a {
border-bottom:1px outset ghostwhite;
}

ul.menu li a {
padding:8px 12px 10px;
}

ul.menu li a:link,ul.menu li a:hover,ul.menu li a:visited,ul.menu li a:active {
text-decoration:none;
border-bottom:1px outset black;
}


ul.menu li {
background: #45484d;
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
background: -o-linear-gradient(top, #45484d 0%,#000000 100%);
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#45484d\', endColorstr=\'#000000\',GradientType=0 );
background: linear-gradient(top, #45484d 0%,#000000 100%);
}
.menu-center {
float:right;
margin-right:95px;
}

ul.menu li a{
color:ghostwhite;
}
ul.menu li a:hover {
background: #efefef;
background: -moz-linear-gradient(top, #efefef 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #efefef 0%,#ffffff 100%);
background: -o-linear-gradient(top, #efefef 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #efefef 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#efefef\', endColorstr=\'#ffffff\',GradientType=0 );
background: linear-gradient(top, #efefef 0%,#ffffff 100%);
color:black;
}
您可以使用css来根据自己的喜好进行调整,但这应该可以让您开始。

为WordPress 3.3兼容性编辑:

更新到最新版本的WordPress(v3.3)后,如果您的主题使用After\\u setup\\u主题挂钩,并且您使用“init”挂钩注册菜单,则菜单将不起作用。

修复方法:

在本例中,我将使用名称yourtheme作为function_name.

示例函数。php文件:

<?php
if ( ! isset( $content_width ) )
$content_width = 610;
add_action( \'after_setup_theme\', \'yourtheme_setup\' );
if ( ! function_exists( \'yourtheme_setup\' ) ):
function yourtheme_setup() {
  // Adds styles the visual editor (editor-style.css)
  add_editor_style();
  add_theme_support( \'automatic-feed-links\' );
  //Register Custom Menu\'s
    register_nav_menus(
      array(
        \'main\' => \'main\',
        \'secondary\' => \'secondary\',
        )
      );  
  // Add Post Thumbs and Custom Image Sizes
  add_theme_support( \'post-thumbnails\', array( \'post\' ) );
  // Add support for a variety of post formats
  add_theme_support( \'post-formats\', array( \'aside\', \'link\', \'gallery\', \'status\', \'quote\', \'image\' ));
  }
endif; // yourtheme_setup
/**
 * Start the rest of your functions.php file code...
 * 
 */
?>
看看这210个主题函数。php文件,以查看要包含在after\\u theme\\u setup挂钩中的其他函数。

结束

相关推荐

创建自定义wp_Dropdown_Categories

我已经为此工作了很多天了。我想将类别分配给作者。我在google上找到了一些提示和插件,但不适用于Wordpress 3.1。我只是想出了我自己的主意。作为管理员,我将为作者创建一个类别,然后在其各自的概要文件元字段中定义或放置类别slug名称。我正在使用自定义的帖子类型名称“networks and taxonomy=blogs”现在,我试图在wp下拉类别中只包含概要文件元字段值(我上面说过)作为默认值,并将其隐藏在我的自定义发布表单中。当我回显时,cat ID和名称是正确的,但它不包括在下拉列表中。有