久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

WordPress:Creating Horizontal Menus

來(lái)自站長(zhǎng)百科
跳轉(zhuǎn)至： 導(dǎo)航、? 搜索

橫向菜單是創(chuàng)建一個(gè)目錄或者網(wǎng)頁(yè)菜單的一個(gè)極好的方式，突出你的站點(diǎn)中一些特別的區(qū)域。 橫向菜單由HTML列表功能創(chuàng)建。對(duì)，雖然它們是橫向的而不是豎向的，就像典型的列表，但它們?nèi)匀皇且粋€(gè)列表。CSS呈現(xiàn)形式能使你在一行而不是一個(gè)分開(kāi)的行中為每個(gè)列表項(xiàng)目設(shè)置列表。 因?yàn)闄M向菜單只列在一個(gè)橫向的一行，讓我們從一個(gè)列表開(kāi)始這個(gè)過(guò)程。

創(chuàng)建一個(gè)橫向菜單[ ]

下面是我們的橫向菜單的一個(gè)簡(jiǎn)單的列表。我們建議你將你的列表設(shè)定小一點(diǎn)，因?yàn)樘啵蜁?huì)長(zhǎng)長(zhǎng)地伸展在屏面上，可能會(huì)導(dǎo)致一些布局的問(wèn)題。我們將列表放到一個(gè)叫做navmenu的層中。 

<div id="navmenu">
<ul>
	<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
	<li><a href="wordpress/recipes/">RECIPES</a></li>
	<li><a href="wordpress/travel/">TRAVEL</a></li>
	<li><a >WORDPRESS</a></li>
</ul>
</div>

就如你看到的，我們?cè)诹斜碇袨?主頁(yè)"和其它的分類，包含了一個(gè)PHP標(biāo)簽，以及一個(gè)轉(zhuǎn)到WordPress的鏈接，這些有用的部分，列表在最簡(jiǎn)單形式下(as styled by the Codex)，看起來(lái)像：

  • 主頁(yè)
  • 處方
  • 行進(jìn)
  • WORDPRESS

你也可以使用wp_list_cats() 模板標(biāo)簽來(lái)列出你的類別。如果你只想列出類別1，2，3，4，5，排斥其它的類別，你的列表可能看起來(lái)像： 

<div id="navmenu">
<ul>
 <li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php list_cats('FALSE', '',
                '', '', TRUE, FALSE, 
                FALSE, TRUE, TRUE, 
                FALSE, , '', , 
                '', '', '2,6,7,8,9,10,11,12', 
                FALSE); ?>
 <li><a >WORDPRESS</a></li>
</ul>
</div>

你放置新列表的地方，可能就在標(biāo)題下面。在WordPress v1.5,在你正使用的WordPress主題文件夾中打開(kāi)header.php文件。將代碼粘貼到文件的底部，在header DIV后，然后保存文件。 在 WordPress v1.2, 打開(kāi) index.php文件，l并且找到 header 部分的尾部，將你的列表代碼放到那兒。

應(yīng)用 CSS[ ]

默認(rèn)情況下，一個(gè)列表是垂直運(yùn)行的，每個(gè)項(xiàng)目都在自己的行上。它也包含有一個(gè)圖像，叫做一個(gè)bullet，在每一行的前面。在你的樣式表上，我們需要給navmenu添加一個(gè)參考，第一步是要清除bullet,并且為整個(gè)列表，將我們的margin和padding設(shè)置為零。 

#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }

如果你保存并且上傳了你的樣式表，在你的網(wǎng)頁(yè)瀏覽器上刷新測(cè)試頁(yè)面，如果一切運(yùn)行順利的話，你可以看見(jiàn)你的列表現(xiàn)在既沒(méi)有bullets也沒(méi)有縮進(jìn)。

現(xiàn)在，我們要添加方法，這個(gè)方法會(huì)將這個(gè)列表設(shè)置成一個(gè)橫行。我們需要給列表項(xiàng)目添加一個(gè)樣式參考。 

#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }

因?yàn)檫@些是鏈接，我們要花一些時(shí)間來(lái)整理好這些鏈接的外觀。你可以做許多事來(lái)設(shè)計(jì)這個(gè)列表，但是現(xiàn)在，讓我們給鏈接列表添加一些空格，這樣它們不會(huì)擁擠在一起，然后去除默認(rèn)鏈接下劃線，而且當(dāng)鼠標(biāo)移向鏈接時(shí)，使鏈接改變顏色。 

#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }

好的，我們不能反抗。讓我們進(jìn)一步地采取另一個(gè)措施，給我們新的橫向菜單列表一些真正的jazz.看看你是否能說(shuō)出做了什么來(lái)，改變了外觀。 

#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none;  margin: 4px;
	padding: 5px 20px 5px 20px; color: blue;
	background: pink;}
#navmenu ul li a:hover {color: purple;
	background: yellow; }

如果我們都正確地完成了這些，你的列表看起來(lái)像：

  • HOME
  • RECIPES
  • TRAVEL
  • WORDPRESS

關(guān)于橫向菜單的更多的信息[ ]

設(shè)計(jì)列表有許多不同的方式。運(yùn)用你的想象力，拿出你自己的設(shè)計(jì)，更改顏色，以及任何你想要更改的東西。以下是一些資源，會(huì)幫助你開(kāi)始，并且學(xué)習(xí)更多的橫向和其它特別效果的菜單：