<dfn id="ipay3"></dfn>
  • <blockquote id="ipay3"><ruby id="ipay3"></ruby></blockquote>
  • <big id="ipay3"></big>

    <small id="ipay3"></small>

    1. 零基礎建站培訓教程介紹

      當前位置:

      wordpress下拉菜單,二級菜單制作

      在之前的建網站的教程中,我們給大家講了如何制作網站導航的二級導航,通過DIV+CSS的方式,可以制作出網站的二級菜單。這種方法是可能幫助我們去制作出內容固定的二級菜單出來,需要手動的修改二級導航里面的內容,才能變成屬于我們自己需要的二級導航欄。

      今天給廣大學習如何做網站的學員介紹另一種更加方便快捷的wordpress下拉菜單制作的方法,它的內容是自動顯示我們后臺的菜單設置的內容。

      wordpress下拉菜單,二級菜單制作

      wordpress下拉菜單制作步驟

      1. 放一個jquery-xl.js到主題文件夾下的images文件夾;下載地址:http://pan.baidu.com/s/1eQH7EP8
      2. 將以下的代碼放到自己網站模板頭部文件header.php的</head>標簽的上方。
        <script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory'); ?>/images/jquery-xl.js"></script>
      3. 刪除原有的網站導航的整個DIV框,這個DIV框可以通過火狐瀏覽器的“審查元素”來找到;
      4. 將以下的HTML代碼放在上一步刪除的導航的位置;(相關教程:html視頻教程
        <div id="navnew">
        <?php wp_nav_menu( array( 'container' => '','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 5, ) ); ?>
        </div>
        <script type="text/javascript">
        var topMenuNum = 0;
        $("#nav_sgBhgn li").hover(
        function(){
        topMenuNum++;
        $(this).attr("id","kindMenuHover"+topMenuNum);
        $("#kindMenuHover" + topMenuNum + " > ul").show();
        $(this).parent().addClass("hover");
        },
        function(){
        $("#"+$(this).attr("id")+" > ul").hide();
        $(this).attr("id","");
        $(this).parent().removeClass("hover");
        }
        );
        </script>
      5. 將以下的CSS樣式加入到自己網站模板的style.css的底部。
        /*wordpress下拉菜單,二級菜單制作 http://www.qqpq.tw/*/
        #navnew {line-height: 60px; width: 100%; background: #3598db; height: 60px}
        #navnew .navigation {margin:0 auto;width:980px;height:100%;}
        #navnew .navigation li {height:60px;line-height:60px;width:100px; z-index: 100; POSITION: relative;text-align:center; FLOAT: left;border-right:1px solid #2f89c5;}
        #navnew .navigation li A {display: block; height: 100%;width:100%; TEXT-DECORATION: none;color: #ffffff;font-size:16px;}
        #navnew .navigation li:hover{background: #2f89c5;}
        #navnew .navigation li ul li,#navnew .navigation li ul li ul li,#navnew .navigation li ul li ul li ul li{border-right:none;border-top:1px solid #2f89c5;}
        #navnew .navigation ul {display: none}
        #navnew .navigation ul li {line-height: 60px; width: 101px;background: #3598db; height: 60px;}
        #navnew .navigation li ul {z-index: 999; POSITION: absolute; width: 100px; display: none; background: #0099ff; TOP: 60px;}
        #navnew .navigation li ul ul {z-index: 999; TOP: 0px; left: 101px}
      6. 進入網站后臺,在左側有一個菜單的選項,可以創建菜單,通過拖拉就可以隨意的修改自己網站的導航和二級導航內容。
      7. 有些學習如何做網站的學員使用的主題可能沒有開啟后臺菜單功能,如果你進入網站后臺后沒有“菜單”選項的話,可以在自己網站的模板函數functions.php中加入以下的函數來開啟菜單。
        //添加菜單功能
        if (function_exists('add_theme_support')) {
        add_theme_support('nav-menus');
        register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'primary' ) ) );
        }

      通過以上的步驟,我們可以在自己建網站時創建一個wordpress下拉菜單,如果你想制作三級,四級菜單,方法可以參考網站三級菜單、四級菜單制作

      1則回應給“wordpress下拉菜單,二級菜單制作”

      1. 建站學員頭像 羅淵說道:

        第十步中模板函數在哪

      發表評論

      相關教程

      1. 網站導航如何制作“熱”“頂”動態圖標
      2. dreamweaver跳轉菜單制作
      3. Wordpress網站導航如何實現分類目錄與頁面的混排
      4. 修改織夢dedecms后臺左側菜單類別與名稱
      5. DEDECMS織夢網站下拉菜單導航的制作(實測可用)
      6. 如何在網站上制作下拉菜單
      7. WordPress導航菜單添加二級菜單的方法
      8. wordpress添加后臺菜單選項及調用方法
      9. WordPress博客導航欄不顯示某分類目錄解決方法
      10. JS實現Tab菜單滾動切換的方法
      零基礎學建站就到學做網站論壇
      雅典娱乐城
      <dfn id="ipay3"></dfn>
    2. <blockquote id="ipay3"><ruby id="ipay3"></ruby></blockquote>
    3. <big id="ipay3"></big>

      <small id="ipay3"></small>

      1. <dfn id="ipay3"></dfn>
      2. <blockquote id="ipay3"><ruby id="ipay3"></ruby></blockquote>
      3. <big id="ipay3"></big>

        <small id="ipay3"></small>