您如何为用于 jquery 编码的菜单栏正确编写 CSS 代码？

Posted 2023-02-16

【中文标题】您如何为用于 jquery 编码的菜单栏正确编写 CSS 代码？

【英文标题】：How do you correctly write CSS code for a menubar intended for jquery coding?

【发布时间】：2015-08-15 15:06:24

【问题描述】：

我想复制我在此处看到的网站的确切外观：iananthonyphotography.com。

它是使用 spry 创建的菜单栏和 jquery 的滑块。

对于我的新站点，我想将 jquery 用于菜单栏和滑块。我做滑块没问题，但菜单栏给我带来了很多问题。

下面是我将用于栏的实际文本的 jsfiddle。

如您所见，所有内容都完美排列，并且在水平滚动时保持在页面中心。但是我的编码在很多方面都是错误的。我需要为 ul 或 ul 和 li 项目赋予样式或 id，以便我可以隐藏菜单的子项目，然后分配 jquery 代码以在鼠标悬停期间显示它。

您在 jfiddle 中看到的内容代表了我在遇到许多问题后所做的拙劣努力。任何人都可以帮我清理css代码吗？对于设计师或开发人员来说，这是小菜一碟，但对我来说却不是。

完整的css代码请参考jsfiddle。我不会花半个小时在每行文本之前放置四个空格来发这篇文章，否则我会直接在这里发布代码。

https://jsfiddle.net/ianant/faaccqt8/

https://jsfiddle.net/ianant/faaccqt8/embedded/result/

a:link 
text-decoration: none;

【问题讨论】：

域已过期，所以我看不到它应该是什么样子。你有截图或类似的网站吗？

【参考方案1】：

我认为这就是你所需要的。如果您需要进行大量清理工作，那么花钱请开发人员来完成这项工作可能是最好的解决方案。

$('nav ul li').on('mouseover',function()
		$(this).children('ul').show();
	 ).on('mouseleave',function()
        $(this).children('ul').hide();
     )

body 
	background-image: url(images/homepage_images/frontpage.jpg);
	background-position: top center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	margin: 0px;


body, td, th 
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;


a 
	text-decoration: none;


nav ul.nav-list 
    text-align: center; 
	width: 1000px;
	margin: 0 auto;


nav ul.nav-list li 
	display: inline-block;
    line-height: 1.5em;


ul.nav-list > li 
    position: relative;
	width: 200px;


ul.nav-list > li > a:hover 
	background-color: #F0F;


nav ul li ul.dropdown 
    display: none;    


ul.dropdown li 
    position: absolute;
    background-color:#C3C;
    left: 0;
    width: 200px;
    z-index: 1;


ul.dropdown li a 
    color: #ddd;


ul.dropdown li a:hover 
     background-color: #0C3;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
<nav class="main-nav">
<ul class="nav-list">
  <li><a href="#">About</a>
    <ul class="dropdown">
      <li><a href="#">The Park</a></li>
    </ul>
  </li>
  <li><a href="#">Updates</a>
    <ul class="dropdown">
      <li><a href="slieshow.html">Slideshow</a></li>
    </ul>
  </li>
  <li><a href="#">Trailers</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>
</div>