如何在 CSS / Jquery 菜单栏上赋予更多样式

Posted 2023-02-16

【中文标题】如何在 CSS / Jquery 菜单栏上赋予更多样式

【英文标题】：How give more style on a CSS /Jquery Menu Bar

【发布时间】：2014-01-03 23:00:40

【问题描述】：

好久不见！！ :)

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

Menu Bar at Jsfiddle

放一些vertical line separator on each option of the menu来分隔它们 不受文本选项等悬停效果的影响。

在右上角的菜单中添加small ''social media'' icons (img) 每一个都指向一个特定的链接 就像文本菜单一样。菜单适合网站内容（940px 宽） 并且有额外的空间，但在小提琴示例中它没有显示。

也很重要>有没有办法添加bigger text on the menu 并通过拉伸使每个菜单词选项更大？看起来很小。我的意思是水平方向，垂直方向保持不变。

重要的是下划线悬停和其余部分看起来一样，就像它在 jsfiddle 中显示的那样，不受这些可能的变化的影响。

我会非常感激！！！ :)

【问题讨论】：

我的回答对你有帮助吗？

是的，绝对的，再次感谢！

【参考方案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。

【讨论】：

感谢您的帮助，对不起，我花了太长时间，我正在用新闻滚动器发布另一个问题，我正在看小提琴，我如何才能插入社交图标的图像文本？

只需将“社交图标”替换为img 标签即可。

我现在在网站上试用一下，稍后通知您，谢谢，非常感谢所有帮助

我检查了它，它工作得很好，但现在 IE 给我一个错误：网页错误详细信息消息：预期 '' 行：34 example.js

如果这对你有帮助，别忘了标记为答案，如果有机会我会尝试看看另一个。要删除线条，您只需调整边框样式。