导航选择/当前状态菜单

-1

我已经创建了我的导航菜单，使用CSS和翻转状态（即悬停，活动）的图像精灵。但是，我试图创建一个“选定/当前”状态（在我的情况下，它与活动状态相同），因此取决于您选择的页面，相应的导航按钮将突出显示。这是我有：导航选择/当前状态菜单

CSS：

#menu li { 
margin: 0; 
padding: 0; 
height: 50px; 
list-style: none; 
display: inline; 
float: left; 
line-height: 40px; 
} 

#menu a { 
display: block; 
height: 50px; 
} 

#menu a:hover { 
background-image:url(../Images/about_rollover.gif) 
} 

#about { 
width: 90px; 
} 

#about a:hover { 
background-position: 0 -50px; 
} 

#about a:active { 
background-position: 0 -100px; 
} 

#about a:selected { 
background-position: 0 -100px; 
} 

#portfolio { 
width: 90px; 
} 

#portfolio a:hover { 
background-position: 90px -50px; 
} 

#portfolio a:active { 
background-position: 90px -100px;

HTML：

<ul id="menu"> 
    <li id="about"><a href"#"></a></li> 
    <li id="portfolio"><a href="portfolio.html"></a></li> 
</ul>

图片精灵：view here

来源

2012-11-13 Jamie Smith

请向我们展示您使用的图像以便更好地理解。 –

我已经添加了一个链接到我的精灵图片 –

你需要看看目前的路径某些类型的应用程序逻辑，而不是严格的CSS。

例如，你可以使用JavaScript：

$('document').ready(function() { 

    //Gets the current window location 
    var currentPath = window.location.pathname; 


    /*Logic to identify where the user is relative 
    to your webpage and update the style*/ 
    if (currentPath = '/portfolio') 
    { 
     $('portfolio').addclass('menuactive'); 
    } 
});

您必须添加类定义状态都用于不同的菜单项。但是这应该让你朝正确的方向发展。要解决这个

来源

2012-11-13 00:22:07 Malkus

对不起，我是一个noob当它来到它的网页设计 - 所以你说的没有对我有很大的意义。 –

**这里是一个例子[链接]（http://jsfiddle.net/yMmuE/）**最终，你的问题的答案是你必须有一些方法来确定用户在哪里。完成后，您可以使用多种方法来更改样式以按照您的喜好显示菜单。 – Malkus

对不起，我仍然无法为我工作。 –

一种方法是把一个类上标识的页面当前浏览，以及将所选择状态的导航项目时它属于特定类下的body标签。像：

HTML：

<body class="about"> 
    <ul id="menu"> 
     <li id="about"><a href=...

CSS：

body.about ul li.about { [selected background position] }

来源

2012-11-13 00:27:58 Erik

当然，我知道这不会编程处理所有的网页，但解决的只是更多的通用指南的一个方式这个问题。 – Erik

第一：
您使用一些语言在服务器级别执行的网站？
如果是这样，这将是有趣的，检查所选择的页面，添加特定的类来标记它，例如（通过PHP）：

<ul id="menu"> 
<li id="about"<?php echo $accessedPage == 'about' ? ' class="selected"' : ''; ?>><a href"#"></a></li> 
<li id="portfolio"><a href="portfolio.html"></a></li> 
</ul>

二：
您可以将一个css选择器悬停并选择：

#about a:hover, 
#about .selected a { 
    background-position: 0 -50px; 
} 

#portfolio a:hover, 
#portfolio .selected { 
    background-position: 90px -50px; 
}

来源

2012-11-13 00:30:24

我无法得到这个工作？ –

@JamieSmith我不明白你的意思。 –

那么，我试过实施你的建议，它并没有为我工作？ –

导航选择/当前状态菜单

回答

相关问题