用戶點擊選項時的導航/按鈕打樁效果

我不確定這是否可能，但是我有一個包含5個按鈕的頁面供您選擇。這可以像導航欄一樣工作。我想知道如果下面是可能使用CSS/JS：用戶點擊選項時的導航/按鈕打樁效果

5 NAV /按鈕選項顯示
當用戶點擊任何按鈕，按鈕的其餘部分似乎在所選擇的按鈕的頂部（打樁過渡或隱藏），因此只有一個按鈕被示
當用戶點擊所選擇的按鈕被顯示的按鈕/選項的其餘部分

抱歉，如果這聽起來有點混亂。我一直在尋找，似乎無法找到任何解決方案。謝謝！

到目前爲止我的代碼的HTML是：

<div class="analytics_buttons"> 
 
    <input class="form-btn" type="button" name="btn1" Value="Option 1" /> 
 
    <input class="form-btn" type="button" name="btn2" Value="Option 2" /> 
 
    <input class="form-btn" type="button" name="btn3" Value="Option 3" /> 
 
    <input class="form-btn" type="button" name="btn4" Value="Option 4" /> 
 
    <input class="form-btn" type="button" name="btn5" Value="Option 5" /> 
 
</div>

來源

2016-12-16 uxui

歡迎SO。請訪問[幫助]，看看有什麼和如何問。建議：投入精力和代碼 – mplungjan

像這樣？ http://jsfiddle.net/Rizowski/Q64yT/ – mplungjan

@mplungjan是的！那是我正在尋找的。我正在查看是否還有一種方法，除了使用JS來檢查點擊哪個按鈕並將其餘按鈕放在選定的按鈕之上。有點像功能/樁效應方面的放射狀菜單。 – uxui

這裏是一個沒有動畫

$(function() { 
 
    $(".form-btn").on("click",function(e) { 
 
    // e.preventDefault(); // stop event if necessary 
 
    $(".form-btn").removeClass("top").toggleClass("stacked"); 
 
    $(this).addClass("top"); 
 
    }); 
 
})

.stacked { display: block; position: absolute; left:0px } 
 
.top { 
 
    z-index:9999 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="analytics_buttons"> 
 
    <input class="form-btn top" type="button" name="btn1" Value="Option 1" /> 
 
    <input class="form-btn" type="button" name="btn2" Value="Option 2" /> 
 
    <input class="form-btn" type="button" name="btn3" Value="Option 3" /> 
 
    <input class="form-btn" type="button" name="btn4" Value="Option 4" /> 
 
    <input class="form-btn" type="button" name="btn5" Value="Option 5" /> 
 
</div>

來源

2016-12-25 17:58:42 mplungjan

你是怎麼做到的。 –

你是什麼意思？ – mplungjan

乾性幽默。對不起：/ –

用戶點擊選項時的導航/按鈕打樁效果

回答

相關問題