需要一些幫助，關於浮動菜單

這是我第一次在這裏後，我很新的發展，但我給它一個嘗試需要一些幫助，關於浮動菜單

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

需要一些幫助，關於浮動菜單

回答

相關問題