在使用jQuery手风琴的形式现场垂直菜单

在菜单中，你也知道 - 该网站的一个组成部分。 有趣的导航在线资源能够兴趣的访问者。 此外，任何菜单的一个重要性质 - 它的紧凑性。 一个简单的垂直菜单轻松使用HTML和CSS创建。 但是，我们更进一步：让我们学习如何创建菜单 - “手风琴”与jQuery的帮助。

创建一个菜单- “手风琴”

什么是手风琴状的垂直菜单？ 这是一个下拉列表，它创建了一个易于浏览，并给出了一个时尚网站。 菜单，以这种方式进行，让你把很多的子项。 当你点击所需的项目鼠标访问时，才会发生。 有人可能会说，这有可能使以这种方式一个简单的菜单，而不使用jQuery的。 是的，它是。 但是这个对象不会是智能手机或平板的业主是非常有用的。 让我们创建一个垂直的菜单，呼吁所有。 然后，改变颜色造型导航，将有可能调整设计到任何网站。

HTML代码

因此，要建立我们的垂直菜单，你必须首先拨打HTML代码，其中将包含以下几行：

在一个名为Accord_menu.html文件保存此代码。

正如你所看到的，我们已经创建了一个无序列表。 它由3个主要点：

- 照片;

- 薄膜;

- 书。

每个项目都有几个段落。 在哪里＃，你将需要添加的链接。 现在，它描述的风格是很重要的。 这一切都取决于你的互联网资源的外观。 该网站必须和谐地融为一体，其设计的垂直菜单。

CSS代码

随着款式你应该不是难事。 我们注意到，只有在这个例子中使用了渐变填充。 这里是CSS代码：

颜色在CSS文件中指定，大小标志是从左边的列表中的项目中删除。 它确定了如何在每个项目和子菜单的行为，当你在它悬停。 例如：

＃e1fee2 -这 淡绿色 子。

＃C4f0f7当你将鼠标悬停在他们-golubovaty阴子。

显示属性问块值来调整必要的填充和大小。 颜色，大小，字体类型，位置 - 一切都在CSS文件的描述。 称呼它，例如，accordionmenu_my1.css。

连接jQuery的菜单改进

您可能还记得，我们的目标 - 打造一个垂直菜单jQuery的。 如果你不熟悉这项技术，不用担心。 我们使用谷歌库，并连接jQuery脚本。 这将使其更具吸引力的菜单。 jQuery是基于超文本标记HTML和JavaScript的相互作用的JavaScript库。 jQuery的允许您访问元素的内容和属性。

因此，连接必要的脚本的HTML文件的主体和设置的规则为2个变量的存储，除了赛马元素。 贡献代码，在其上有一个鼠标点击所述一个的开闭其他标签。 下面是它的外观：

保存所有更改，看看它看起来像在浏览器菜单。 这是一个共同的结果： 因此，我们得出一个有吸引力的菜单，你可以随时改变，这取决于他们的喜好。 而在jQuery的，CSS的领域获取新知识，您将创建该网站的独特元素，提高他们的技能。