web-dev-qa-db-ja.com

21のテーマのようにドロップダウンメニューを作成する方法？

私は本当に21のテーマのドロップダウンメニューソリューションが好きです。

http://twentyelevendemo.wordpress.com/

そして、似たようなものを作成したいのですが、それがどのように機能するのかわかりませんか、それともドロップダウンメニュー用の既存のコードに基づいていますか。

使用できるソースコードはありますか、それともその背後にある原理を誰かが説明できますか？

私は、インターネットがjsとnon-jsの両方の解決策でいっぱいであることを知っています、私も自分自身を作りました、しかしIMOはこのメニューの近くに来ないので、助けは認められます:)

theme-twenty-tendropdowntheme-twenty-eleven
3
CodeVirtuoso

私は最近ちょうどこれをやっていました。あなたがどれくらい進んでいるかわからないので、あなたはすでにこのことのいくつかを知っているかもしれません。

私は このビデオ が非常に良いことがわかりました（+それは第二部です）

私が行った研究の最初の部分の1つは これだったと思います

Twenty Elevenも スーパーフィッシュjqueryプラグイン を使っていると思います

他のポスターが述べたようにあなたはテーマファイルの中のどこかに21のコード自体を見つけることができます

1
byronyasgur

これが私のプロジェクトを始めるために使う簡単なスニペットです：

最初のステップは、functions.phpファイルにコードを追加することです。これがWordPressカスタムナビゲーションを有効にするものです。あなたの終了したら、コントロールは外観>メニューになります。 functions.phpのためのコード：

<?php
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array(
    'main' => __( 'main' ),
    'secondary-menu' => __( 'Secondary Menu' ),
    ));
}
?>

上記のコードは2つのメニューを可能にします。私はあなたがそれを加える方法をあなたに望むでしょう、そしてあなたが望むならばあなたが望むところならどこでも秒を加えるのに同じ方法を使うことができます。

次のステップはheader.phpファイルにコードを追加することです。上記のように、配列の最初のメニューにはmainというラベルが付いています。これは、header.phpにメニューを配置するために使用するものです。

以下はheader.phpのコードです。

<div id="menu" class="menu-center">
    <?php wp_nav_menu( array( 'theme_location' => 'main' ) ); ?>
</div>

これはあなたの<div id="header"> divの中に置かれるべきです（必須ではありませんが、コードの最も一般的な場所です）。

最後のステップは、メニューをスタイル設定するためのCSSを追加して、実際にはそれを「ドロップダウン」にすることです。マルチレベルリンクの束ではありません。

CSSコード：

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_setup_themeフックを使用していてメニューの登録に 'init'フックを使用している場合はメニューが機能しないようです。

修正：

この例では、 function_name としてyourthemeという名前を使用します。

サンプルfunctions.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...
 * 
 */
?>

TwentyTen Themesのfunctions.phpファイルを調べて、after_theme_setupフックに含める他の関数を確認してください。

4
Jeremy Jared