Question

我不知道HTML或编码。下面是复制和粘贴，我没有创建。基本上我们有一个包含三个不同菜单部分（家庭，博客，联系人）的图像以及菜单可能处于的四种不同状态：正常，悬停，点击和活动。

选定/活动，仅适用于主页。如何将活动图像粘贴到与其他页面关联的其他图像？

P.S。我对任何事都一无所知，所以如果你能逐步告诉我应该使用什么样的代码（给出下面的确切编码）以及放置它的位置，那将是最有帮助的。 < / p>

CSS代码：

#ul.cssmenu a { background:url(header-icon-strip.png); }
  .ul.cssmenu {
    list-style: none;
    padding: 0px;
    }



.displace {
    position: absolute;
    left: -5000px;
    }

ul.cssmenu li {
    float: left;
    }

ul.cssmenu li a {
    display: block;
    width: 120px;
    height: 25px;
    background: url('http://www.webvamp.co.uk/uploads//2009/03/sprite.gif');
    }

/*
*   Normal Links
*/
ul.cssmenu li.home a {
    background-position: 0 0;
    }

ul.cssmenu li.blog a {
    background-position: -150px 0;
    }

ul.cssmenu li.contact a {
    background-position: -300px 0;
    }

/*
*   Hover Links
*/
ul.cssmenu li.home a:hover {
    background-position: 0 -44px;
    }

ul.cssmenu li.blog a:hover {
    background-position: -150px -44px;
    }

ul.cssmenu li.contact a:hover {
    background-position: -300px -44px;
    }

/*
*   Clicked Links
*/
ul.cssmenu li.home a:active {
    background-position: 0 -88px;
    }

ul.cssmenu li.blog a:active {
    background-position: -150px -88px;
    }

ul.cssmenu li.contact a:active {
    background-position: -300px -88px;
    }

/*

*   Selected/Active Links
*/
ul.cssmenu li.home a.selected {
    background-position: 0 -132px;
    }

ul.cssmenu li.blog a.selected {
    background-position: -150px -132px;
    }

ul.cssmenu li.contact a.selected {
    background-position: -300px -132px;
    }

Div菜单代码：

<ul class="cssmenu">

<li class="home"><a href="http://example.com/" class="selected" title="Home"><span class="displace">Home</span></a></li>

<li class="blog"><a href="http://example.com/blog.html/"  title="Blog"><span class="displace">Blog</span></a></li>

<li class="contact"><a href="http://example.com/contact.html/" title="Contact"><span class="displace">Contact</span></a></li>

</ul>

Answer 1

如果您正在使用单个HTML页面，则应编辑每个页面以使相应的菜单项具有所选/活动类。

<强> home.html的

<ul class="cssmenu">
  <li class="home"><a href="http://example.com/" class="selected" title="Home"><span class="displace">Home</span></a></li>
  <li class="blog"><a href="http://example.com/blog.html/"  title="Blog"><span class="displace">Blog</span></a></li>
  <li class="contact"><a href="http://example.com/contact.html/" title="Contact"><span class="displace">Contact</span></a></li>
</ul>

<强> blog.html

<ul class="cssmenu">
  <li class="home"><a href="http://example.com/" title="Home"><span class="displace">Home</span></a></li>
  <li class="blog"><a href="http://example.com/blog.html/" class="selected" title="Blog"><span class="displace">Blog</span></a></li>
  <li class="contact"><a href="http://example.com/contact.html/" title="Contact"><span class="displace">Contact</span></a></li>
</ul>

依旧......

带有翻转和选定效果的CSS导航菜单。我如何申请“选中”？

1 个答案: