需要一些帮助，关于浮动菜单

这是我第一次在这里后，我很新的发展，但我给它一个尝试需要一些帮助，关于浮动菜单

IM在我的投资组合的网站工作的活动状态，并且它将是一个很长的页面，所以我想在旁边添加子弹/点，所以你可以轻松浏览项目，也可以看到你的位置。例如，向下滚动此网站（http://discover.store.sony.com/be-moved/），看看子弹/右侧点..

这是我大气压：http://thinkagain.nu/?page_id=2501

我试图实现一定程度上的同样的事情，我设法创建一个浮动菜单，并添加一些类型的按钮（类似子弹/点的样式）与鼠标悬停风格。现在，当您点击全部时，它可以很好地工作，但它不会进入活动状态。

所以，当第一个项目中的第一颗子弹/点应该是白色的，第二个项目，使得第2点去白等你得到的图片...使用

这下面的代码：

CSS

#floatnav { 
    position: fixed; 
    right: -50px; 
    top: 50%; 
    width: 8em; 
    margin-top: -2.5em; 
} 

.bullit { 
    background-color:#242424; 
    -moz-border-radius:17px; 
    -webkit-border-radius:17px; 
    border-radius:17px; 
    border:0px solid #000000; 
    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:arial; 
    font-size:12px; 
    padding:5px 5px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #2f6627; 
    box-shadow: inset 1px 4px 9px -6px; 
    box-shadow: 2px 2px 1px #888888; 
} 
.bullit:hover { 
    background-color:#ebebeb; 
    box-shadow: inset 1px 4px 9px -6px; 
} 
.bullit:active { 
    position:relative; 
    top:1px; 
}

HTML

<ul id="floatnav"> 
<a href="#cinerama" class="bullit"></a> 
<a href="#magicalgems" class="bullit"></a> 
<a href="#deltalloyd" class="bullit"></a> 
<a href="#ezchef" class="bullit"></a> 
</ul>

如果任何人都可以HEL请将我指出或指出我正确的方向，这将不胜感激！

在此先感谢

编辑：

感谢的人！几乎在那里......我也希望当你向下滚动每个内容部分时，点/子弹变得活跃。这可能吗？

来源

2014-01-13 ThinkAgain

与jQuery你可以addClass()在点击子弹，试试这个：

$('#floatnav a').click(function() { 
    $('#floatnav a').removeClass('active'); /*Remove previous*/ 
    $(this).addClass('active');    /*Active clicked*/ 
})

而且在CSS类：

.bullit.active { 
    position:relative; 
    top:1px; 
    background:orange; 
}

入住这Demo Fiddle

来源

2014-01-13 15:46:33 DaniP

感谢的人！几乎在那里......我也希望当你向下滚动每个内容部分时，点/子弹变得活跃。这可能吗？ – ThinkAgain

的休息你的代码是fyn只需在你的js文件中添加这个jquery代码（在我们之前也使用jquery lib荷兰国际集团的代码）

$('#floatnav a').on('click',function() { 
$('#floatnav a').removeClass('active'); 
$(this).addClass('active'); 
})

&一行一行的CSS：

.active { background:red; }

这里是直播前：http://jsfiddle.net/3eBJ8/

来源

2014-01-13 16:12:57

lol你复制/粘贴我的小提琴...有jQuery的功能的意见 – DaniP

需要一些帮助，关于浮动菜单

回答

相关问题