菜单与三个国家不育系

基于以前的教程，我决定创建本教程解释如何使法律的菜单，所有，你可以利用，它可以用于任何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">” 首页</ 一> </ 李> <li> <一 类 =“提交的”href =“enviar.php”>发送</ 一> </ 李> <li>的<a 类 = "contact" 的HREF = "contacto.php">联系</ 一> </ 李> <李 > 的<a 类 = "resources" 的HREF = "recursos.php">资源</ 一> </ 李> </ UL认证> <！ -完菜单- >“

现在，我们添加一个 ID为标签<ul>（第一线），然后我们添加一个类的每一个标签<a>以（1每一个环节的不同之一），所以我们将有一个索引，电子邮件，联系人一种资源。

这足以对我们的菜单有HTML结构，保存为index.php网页，顺应风格。

添加样式

打开一个新页面的CSS。

它为我们不断style.css文件，返回到PHP页面链接到样式。

我们开始我们的方式到元素“*”，正如影片中所解释的划痕教程就如何使描写一个WordPress的，是用来添加不同特点，所有的内容，让每一个属性添加了星号，这将是所有的元素在我们的网站目前采取的，我们只添加margin和padding：

  *（
 0 ; 保证金：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;字体家庭：宋体，黑体， 无衬线;）

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

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

他刚刚起飞，在每个项目中的列表（第2行），并为对ubircarlo保函（3号线）上的范围开始点。

我们将继续与元素“里”，我们将只添加属性“显示：内联”将设在彼此旁边。

 一
 2
 3

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

现在是时候来编辑项目“1”，将采取以下属性。

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

宽度和）高度每张图片（行3和4分别财产浮动：左设一个缩进权的其他文字文本，并删除里面的标签<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的身体这么简单。

例如：

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

如果你不使用这个Wordpress或任何其他CMS菜单编号只是增添了每一页并跳转到下面的CSS下一步不同的身体，你将有你这样的身体：

文件：index.php的

机构：

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

文件：enviar.php

机构：

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

文件：contacto.php

机构：

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

文件：recursos.php

机构：

一 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 =”，“”，$ 页）= $ $页页？$ 页 ：'默认'？>

我会解释每一行：

1 - 打开php代码

2 -把网址中，我们是（记住，使用WordPress的网址是“更喜欢的东西http://www.tublog/tu-pagina/）。

3 -在哪里留下斜线“/”将是任何东西所取代！ “。”

4 - 去哪里了一些。“腓”，将取代任何东西！。

5 - 去哪里吗？S =“，会被什么东西所取代！。

6 - 它返回的结果。

7 - 关闭PHP标签。

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

现在，我们去我们的身体，我们将添加：

一	"<?php echo $pagina ?>" > <身体的id =“<？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） 不重复;）＃身体＃菜单里的资源。资源 （背景： 网址 （图片 /资源悬停。 巴纽） 不重复;）

准备好了，这就是告诉我们的是，当身体有这些编号（索引，发送，接触，资源）的，将“阶级”取悬停形象。

准备好了！我们完成我们的菜单都WordPress的CMS或任何其他网页。PHP中，在那里我离开了这里的压缩文件都是最终决定。

这里的结果下载本教程

迈克尔是创造者和skyandstars.net它出版指南和WordPress的，CuteNews的，PHP，HTML和更多教程主编。目前是大学生。

Mijael166

也许这些条目1您可能感兴趣的

7回应“菜单与三个国家不育系

伊萨
2009年4月27日
反应

我有点困惑，我看到我的菜单我利用Dreamweaver做的，当然更容易：S
前往，并提出了本教程迈克尔水平！我祝贺你：）
迈克尔
2009年4月28日
反应

哈哈...是啊，基本上是不断变化的图片，但效果..他想强调的是，页面在WordPress的....这些HACR dificl突出是因为相同的标题，所有网页的工作... ...因为用PHP entoncs这是否...一吻伊萨=）
伊萨
2009年4月29日
反应

阿姆去！去年秋季，我第一次看到没有离开突出当您在另一个页面点击，为什么鼻子什么。现在，如果我看到不同的，其实我有时想知道，瓦，因为这将，是啊是啊，我喜欢这个教程中，再次证明了法规清单，我必须做的，因为我的网站可以成为对不对？
迈克尔
2009年4月30日
反应

当然：对需要做的只是从它的ID添加到身体的风格：）...或者如果你想自动把身体，用PHP做它...但远.. 是你喜欢的...元的BESO！
伊萨
2009年4月30日
反应

好！嘻嘻
graciebird
2009年4月30日
反应

很好的tuto将用它下一次更改的版本。谢谢。当然留在了很多论坛上绝望的消息，希望能帮助我。通过网站帮助我这么多。
弗兰
2009年6月22日
反应

良好的tuto，非常有用的，很好的解释，以及最后的文件。真是感谢

发表评论

阅读您的语言教程：

载入中...

添加您的电子邮件地址，我们会将所有的教程新skyandstars完全免费的！

或者你也可以按照我们通过..