Question

很久!! ：）

如果有人可以帮助我，我会很感激，这是我一直用于我的网站的jquery菜单，我想知道是否有可能：

将一些vertical line separator on each option of the menu分开不受像文本选项那样的悬停效果的影响。
添加到右侧角落端的菜单small ''social media'' icons (img) 每一个都指向一个特定的链接就像文本菜单一样。菜单适合网站内容（940px宽度）并且有额外的空间，但在小提琴示例中它没有显示。
也很重要＆gt;有没有办法添加bigger text on the menu 并通过拉伸使每个菜单字选项更大？看起来很小。横向我的意思是，垂直方向保持不变。

重要的是，下划线悬停和其余部分的显示方式与jsfiddle中显示的相同，而不会受到这些可能的更改的影响。

我会非常感激!!! ：）

Answer 1

您可以通过一些CSS和标记更改来实现您的目标

#example-one { margin: 0 auto; list-style: none; position: relative; width: 940px; font-family:Arial; }
#example-one li a { color: #bbb; font-size: 14px; letter-spacing:2px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; border-right: 1px solid white; }
#example-one li:first-child a { border-left:1px solid white; }

在第一行，您可以添加font-family来更改菜单中使用的字体。
在第二行，我添加了border-right，并设置letter-spacing:2px。
我添加了第三行，只给第一个项目border-left（这样就可以得到分隔符的完整外观）。

此外，我将此项添加到您的列表中，您可以轻松地将社交媒体图标插入：

<li style="float:right;"><a style="border:none;" href="#">Social Icon</a></li>

您可以使用float:right将其推到菜单的右侧。

这是updated fiddle。

如何在CSS / Jquery菜单栏上提供更多样式

1 个答案: