wordpress頂部導航固定 wordpress移動端底部菜單

怎么將導航欄始終固定在窗口頂部?

以下代碼已經(jīng)實現(xiàn)了需要的功能，導航條固定在了網(wǎng)頁的頂部，這個主要是使用position:fixed，然后將top值設置為0即可。

網(wǎng)站建設哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)公司、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了揭東免費建站歡迎大家使用！

!DOCTYPE?html?html?head?meta?charset="utf-8"?meta?name="author"?content=""?/?title固定在窗口頂部/title?style?type="text/css"*{

padding:0px;

margin:0px;}body,?ul,?li{

background-color:white;

font-size:12px;

font-family:Arial,?Helvetica,?sans-serif;

text-align:center;}#main{

width:20px;

height:1000px;

margin:0px?auto;

background-color:#CCC;}#nav{

width:500px;

margin:0px?auto;

position:fixed;/*固定作用*/

top:0px;

left:490px;

/*ie6下樣式，加下劃線表示只針對ie6?的hack?*/

_position:absolute;/*?把導航欄位置定義為絕對位置??關鍵*/

_top:expression(documentElement.scrollTop?+?"px");?/*?把導航欄位置放在瀏覽器垂直滾動條的頂端??關鍵?*/

z-index:9999;?/*?讓導航欄浮在網(wǎng)頁的高層位置，遇到flash和圖片時候也能始終保持最外層?*/

text-align:left;}a{

color:#000000;

text-decoration:none;}.menu{

width:120px;

height:18px;

margin:0px?4px?0px?0px;

background-color:#F5F5F5;

color:#999999;

border:1px?solid?#EEE8DD;

padding:6px?0px?0px?0px;

overflow-y:hidden;

cursor:hand;

display:inline;

list-style:none;

font-weight:bold;

float:left;}/style/headbodydiv?id="nav"

ul

li?class="menu"a?href="#"前臺專區(qū)/a/li

li?class="menu"a?href="#"后臺專區(qū)/a/li

li?class="menu"a?href="#"交流專區(qū)/a/li

/ul/divdiv?id="main"大家拖動滾動條下吧?我很長?這樣就能看到導航欄固定的效果了?/div/body/html

wordpress如何在頁面滾動時固定導航欄？

最簡單的設置導航的css屬性

position:fixed;

不過此屬性IE6不支持

如何用wordpress實現(xiàn)導航頁

第一步、添加多導航菜單功能。

這時，我們要用到一個自定義菜單函數(shù)register_nav_menus()函數(shù)。打開主題的function.php文件，把下面的代碼添加進去：

register_nav_menus( array(

'primary' = '第一導航菜單', //這里的primary 你可以自己設置，你也可以寫成top-menu ；但是要在調用菜單時也用同樣的名字。

'secondary' = '第二導航菜單',

) );

我這里只用了2個菜單，你還可以多設置幾個，根據(jù)自己的需求。

第二步、調用多導航菜單。

1、在需要導航菜單的地方，放置調用代碼。

比如：頂部header.php文件、footer.php文件等。把下面的代碼放到這些文件里：

頂部導航：

?php wp_nav_menu( array( 'theme_location' = 'primary','container'='ul','menu_id'='menu','menu_class'='menu','link_before' = 'span','link_after' = '/span',)); ?//這里就用到了前面設置的primary.

左側邊導航：

div id="floatMenu"!-- 左側菜單導航 --

ul class="menu2"

lia href="/" style="color:#fff; background-color:#6994c9;" title="wordpress主題首頁"網(wǎng)站首頁 /a/li

?php wp_nav_menu( array( 'theme_location' = 'secondary','container' = '','items_wrap' = '%3$s','fallback_cb'= '' ) ); ?//這里就用到了前面設置的secondary.

/ul

/div

2、在后臺設置菜單。

后臺——外觀——菜單，先創(chuàng)建菜單，然后從左側添加菜單內容，如添加分類和頁面到菜單，如何添加菜單，你可以參考wordpress怎樣添加導航菜單？，這里就不多說了。菜單添加好之后，還要設置在哪里顯示這個菜單，如下圖：

是我們添加的菜單內容。這里，我們要設置 2 處，選擇你要顯示的位置，這里是高時銀博客的選擇，選的是“第二導航菜單”，是在左側顯示。

第三步、設置CSS樣式。

如果是頂部菜單，這里就不需要設置了，因為，主題一般都有這個。如果是像高時銀博客這樣的新添加的左側菜單，那就要添加CSS樣式了，樣式如下：

/* 浮動菜單*/

#floatMenu { display:block; width:110px; margin-left:-605px; position:fixed; left:50%; top:152px; _margin-left:-605px; _width:120px;_position:absolute; _margin-top:0px;}//這里的_margin-left前面的 _ 表示兼容IE6 。

#floatMenu ul { margin-bottom:2px; }

#floatMenu ul.menu2 li a { display:block; font-size:14px; font-weight:800; color:#6994c9; border-left:1px solid #dadcdd; border-right:1px solid #dadcdd; border-bottom:1px solid #dadcdd; background-color:#ffffff; text-decoration:none; padding:2px 0px 2px 0; text-align:center; }

#floatMenu ul li a:hover { color:#fff; background-color:#6994c9; }

就這樣，我們就給自己的網(wǎng)站實現(xiàn)了多導航菜單功能。

HTML5如何才能讓導航欄固定頂部不動，且！且！且！不遮擋住下面的DIV？？？

HTML5讓導航欄固定頂部不動且不遮擋住下面的DIV方法如下：

1，首先在html中，添加良好的導航內容。

2，后者是網(wǎng)頁的具體內容，這里的代碼比較簡單。

3，在樣式中，首先在菜單中定義一些樣式。

4，此時，在運行頁面時，滾動條滾動后導航將消失。

5，為了將導航欄固定在頂部，可以添加樣式位置：固定；最高：0;在導航容器中，鍵是第一個樣式，因此其位置是固定的。

6，此時，頁面開始運行，頁面向上滾動，并且導航始終在頂部。

網(wǎng)站欄目：wordpress頂部導航固定 wordpress移動端底部菜單
分享路徑：http://muchs.cn/article24/ddcjdce.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、微信公眾號、外貿(mào)建站、移動網(wǎng)站建設、網(wǎng)站營銷、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)