菜单有3个不育系州

根据以前的教程，我决定建立本教程解释如何与法律的一个菜单，你可以用它到任何你有PHP页面，和任何不育系，即使是著名的WordPress的。

观看演示

工具

1 -每一节快捷菜单图像。

2 -这些图像将用于悬停的财产。

3 -计划为HTML（如Dreamweaver中）。

4 -一些知识者：CSS，HTML和PHP。

HTML结构

首先，我们需要打开一个新的PHP页面，使我们的菜单，我们将创建HTML结构排列的清单：

 "menu" > <!--Comienza Menu--> < li >< a class = "index" href = "index.php" > Home < / a >< / li > < li >< a class = "enviar" href = "enviar.php" > Enviar < / a >< / li > < li >< a class = "contacto" href = "contacto.php" > Contacto < / a >< / li > < li >< a class = "recursos" href = "recursos.php" > Recursos < / a >< / li > < / ul > <!--Termina Menu--> <Ul 编号 = "menu">“！ -开始菜单- ”<li> <a 级 = "index" 的HREF = "index.php">“ 首页</ 1”“/丽”<li>“一 类 =“电子邮件的”href =“enviar.php”“发送”/ 1“”/丽“<li> <a 级 = "contact" 的HREF = "contacto.php">联系”/ 1“”/丽“”丽“<a 类 = "resources" 的HREF = "recursos.php">资源”/ 1“”/丽“”/ UL认证“”！ -完菜单- “

现在，我们添加一个ID来标记<ul>（第一行），然后我们添加一个类每个标签<a>，（在每个连接不同的），所以我们将有一个指数，一个电子邮件，一个接触和一个资源。

这足以得到我们菜单的HTML结构，保存为index.php网页，并继续与风格。

添加样式

我们打开了一个新网页的CSS。

在保存为style.css文件，并返回到PHP页面链接到样式。

我们开始我们的做法元素“*”的，如videotutorial解释了如何从头开始wordpress主题，是用来添加不同的功能，所有元素，因此，每一个属性，添加星号，这将是所有的元素在我们的网页中，采取更不用说向margin和padding：

 : 0 ; padding : 0 ; } *（保证金：0;填充：0;）

我们将继续与身体，我们把我们的网页上有以下背景图像美观得好：

所以是我们身体的CSS：

 : url ( imagenes/bg.png ) repeat-x #333333 ; font-size : 12px ; font-family : Arial , Helvetica , sans-serif ; }体（背景： 网址 （图像 / bg.png） 重复- x＃333333; 字体大小：12px;字体- family：宋体，海尔维希， 无衬线;）

好了，如果现在让我们开始我们的菜单样式，首先身份证的“菜单”

  ＃菜单 （
 none ; 列表样式： 无;
 15px ; 保证金顶：15px;
 ）

只有我们要在每个项目中的一个ubircarlo bg（第3行）杆名单（第二行）和上限范围的开始点。

我们将继续与元素“礼”，我们将只添加属性“显示：内联”将设彼此相邻。

  1
 2
 3

  ＃菜单里（
 inline ; 显示： 内联;
 ）

现在是修改该项目的“a”，将采取以下属性。

 display : block ; width : 60px ; height : 102px ; float : left ; text-indent : -5000px ; margin-left : 2px ; } ＃菜单李一（显示： 块; 宽度：60px;高度：102px;浮动：左， 文字缩进：- 5000px;保证金左：2px;）

宽度和高度的每张照片（线分别为3和4），物业浮动：左设于其他文本的右缩进1，以消除内部的文本标记<a>，和左边距分隔菜单有点对方。

我们现在使用的每类标记为“1”。因此，我们已经离开。

 { background : url ( imagenes/home.png ) no-repeat ; } #menu li a .enviar { background : url ( imagenes/enviar.png ) no-repeat ; } #menu li a .contacto { background : url ( imagenes/contacto.png ) no-repeat ; } #menu li a .recursos { background : url ( imagenes/recursos.png ) no-repeat ; } ＃菜单李答 ： 指数 （背景： 网址 （图像 / home.png） 不重复;）＃ 菜单 后李答 ：（背景： 网址 （图像 / enviar.png） 不重复;）＃ 菜单李答 ： 接触 （背景： 网址 （图像 / contacto.png） 不重复;）＃ 菜单李A.资源 （背景： 网址 （图像 / recursos.png） 不重复;）

只需添加背景，每个元素。

继续：盘旋每个图像的CA更改鼠标时，对他们。

 :hover { background : url ( imagenes/home-hover.png ) no-repeat ; } #menu li a .enviar :hover { background : url ( imagenes/enviar-hover.png ) no-repeat ; } #menu li a .contacto :hover { background : url ( imagenes/contacto-hover.png ) no-repeat ; } #menu li a .recursos :hover { background : url ( imagenes/recursos-hover.png ) no-repeat ; } ＃菜单李答 ： 指数：悬停 （背景： 网址 （图像 / 家庭hover.png） 不重复;）＃ 菜单李答 ： 电子邮件：悬停 （背景： 网址 （图像 / 后hover.png） 不重复 ;）＃菜单李答 ： 联系人：悬停 （背景： 网址 （图像 / 接触hover.png） 不重复;）＃ 菜单李A. 资源： 悬停 （背景： 网址 （图像 / 资源hover.png） 否重复;）

通常情况下，只需添加在每个元素的结束“徘徊”，改变每个图像。

用什么做了迄今只是为了有充足的通过在图像上鼠标选项。这是PHP在哪里发挥作用的地方，因为我们做到这一点，被标记的菜单部分，我们在呢？，我们通过简单地增加一个id身体了。

例如：

1	"enviar" > <Body 编号 = "post">

当不使用这个WordPress的菜单或任何其他CMS只需添加一个ID从每个页面并跳转到下面这个CSS下一步身体的不同，您已离开户口本机构一样的东西：

文件：编辑

机构：

1	"index" > <Body 编号 = "index">

文件：enviar.php

机构：

1	"enviar" > <Body 编号 = "post">

文件：contacto.php

机构：

1	"contacto" > <Body 编号 = "contact">

文件：recursos.php

机构：

1 2	] "recursos" > <Body 编号 = "resources">

正如我以前说过，如果你这样做手工，找到新的一节中的CSS，在本教程。

如果您正在使用这个WordPress的菜单，我们将有一个问题，我们应该如何添加一个id为每个机构有不同的菜单，如果是在一个名为“的header.php”相同，即头文件作为发送到主页联系，那么我们添加下面的PHP代码。我们的网页。

的<Body>在我们写如下：

 = $_SERVER [ 'REQUEST_URI' ] ; $pagina = str_replace ( "/" , "" , $pagina ) ; $pagina = str_replace ( ".php" , "" , $pagina ) ; $pagina = str_replace ( "?s=" , "" , $pagina ) ; $pagina = $pagina ? $pagina : 'default' ?> “？PHP的 $页面 = $ _SERVER ['REQUEST_URI']，$页 = str_replace（”/“，”“，$页）$ 页 = str_replace（”。php“的，”“，$ 页）$ 页 = str_replace（“？商S =”，“”，$ 页）= $ $页页：$ 页 ：'default'的？“

我会解释每行：

1 -打开PHP代码

2 -带的网址上，我们的（记住，WordPress的URL被用于类似的“http://www.tublog/tu-pagina/”）。

3 -去哪里有斜杠“/”，将可以替换！ “”。

4 -去哪里了。“php”的，将被任何东西所取代！。

5 -去哪里了吗？商S =“，将可以替换！。

6 -它返回的结果。

7 -关闭PHP的标记。

因此，我们要做的就是采取的网址，并删除所有的东西，不符合我们为我们的身份证。

现在，让我们的身体，我们将添加以下内容：

1	"<?php echo $pagina ?>" > “身体编号=”“？PHP的echo $ 页？”“”

有准备的！该机构将采取的页面中，我们发现自己的ID。

我们现在对我们的编号样式添加身体。

添加以下。

 { background : url ( imagenes/home-hover.png ) no-repeat ; } body #enviar #menu li a .enviar { background : url ( imagenes/enviar-hover.png ) no-repeat ; } body #contacto #menu li a .contacto { background : url ( imagenes/contacto-hover.png ) no-repeat ; } body #recursos #menu li a .recursos { background : url ( imagenes/recursos-hover.png ) no-repeat ; }身体＃指数＃菜单李答 ： 指数 （背景： 网址 （图像 / 家庭hover.png） 不重复;）身体＃电子邮件＃菜单 后李答 ：（背景： 网址 （图像 / 后hover.png） 否重复;）身体接触李＃＃ 菜单。 联系 （背景： 网址 （图像 / 接触hover.png） 不重复;）身体＃资源＃菜单李A.资源 （背景： 网址 （图像 /资源悬停。）格式 不重复;）

通常，这就是它说的是，当这些机构有身份证（索引，电子邮件，联系人，资源）之一，将“阶级”采取悬停的形象。

聪明的！因此，我们已经完成了我们的WordPress的食谱，CMS或任何其他网页。PHP的，我离开这里的zip，所有的最终文件。

这里的结果下载本教程

迈克尔是创作者和编辑skyandstars.net它出版的指南和有关WordPress的，CuteNews和PHP，HTML和更多的教程。 Acutalmente大学生。

Mijael166

也许这些项之一您可能会感兴趣

7“菜单评论与三个国家不育系”

伊萨
4月27日，2009
答案
我有点困惑，我看到像我做我的菜单与Dreamweaver，当然更容易：小
你去提高了水平的教程迈克尔！祝贺：）
迈克尔
4月28日，2009
答案
Jajaja市...基本上是改变图片..但效果他们想要强调的是，在这些网页.... Dificl HACR显着的WordPress的是，工程的所有网页相同的标题... ...然后是用PHP entoncs这是否...一吻伊萨=）
伊萨
4月29日，2009
答案
阿姆公平！ esque我第一次看到不突出当竖起了另一页上，为什么鼻子任何东西。现在，如果我不这样看，其实我有时想瓦特因为它如果我喜欢本教程中，另一对法规的清单，我这样做，因为我的网站可以成为没有？
迈克尔
4月30日，2009
答案
当然：对需要做的只是从它的样式添加id的身体：）...或者如果您希望自动把身体，做PHP来...但良好的.. 是为了自己的喜好...元的BESO！
伊萨
4月30日，2009
答案

好的！杰杰奥
graciebird
4月30日，2009
答案

非常好的政党成员将利用下一次更改的版本。谢谢您。当然，留在论坛帮助我绝望的很多希望的消息。通过网络帮助了我这么多。
弗兰
6月22日，2009年
答案

阙布恩蒂政党成员，非常有用的，很好的解释，并与最后文件。真是感谢