臥式wordpress菜單中心的空間

我正在尋找一個解決方案來解決一個獨特的問題。我在爲一個多站點構建開發的主題上的「網絡菜單」下面有一個wp_menu。菜單中央有一個小小的圓環，用於存放徽標，我很好奇是否有辦法讓透明的列表項目容納該位置，並允許所有其他「合法」列表項目環繞該位置，所以無論是向左還是向右。臥式wordpress菜單中心的空間

我已經有一個過濾器，插入一個列表項，我可以通過添加css來定製，我只是不知道如何讓一個列表項特別是保持圈存在的地方。

的網址是： http://www.mountainjackscreative.com/sandbox/edts/sample-page/

任何幫助，甚至只是想法將是巨大的！

謝謝大家。

來源

2012-08-26 joshrathke

既然你使用jQuery，你可以在菜單上做一些數學運算。

編輯：

LAST_EDIT你的頭標記的結束之前將這個：這裏的JS小提琴http://jsfiddle.net/BsnFW/14/。最後的嘗試:)

$(document).ready(function() { 

    menuBreakPoint = 200; //width in px after which you want to insert the space (experiment with this) 
    menuWidth = 0; 
    rightMenuStart = 600; //width in px from left of menu container div to the right 


    $('.sub_site_menu li').each(function() { 
     menuWidth += $(this).width(); 
    if (menuWidth >= menuBreakPoint) { 
     $(this).css('margin-left', (rightMenuStart - menuWidth)); 
     return false; //break out of each loop 
    } 
    }); 

});

使用此。

來源

2012-08-26 06:18:57

我試圖實現你提供的代碼，但我有一點麻煩讓它正常工作。我把它插入到我的文檔的頭部。這是正確的地方嗎？我也將菜單重新命名爲.sub_site_menu，並且稍微改變了數字，但沒有運氣。 – joshrathke

編輯得當。你也可以把它放在一個單獨的文件中，並通過執行 –

做到這一點！萬分感謝。 Jquery名列榜首，接下來要學習。它解鎖了很多可能性！ – joshrathke

你不能把這份清單分成兩份嗎？漂浮一個左邊和另一個右邊。提供合適的邊距，以便標識上不顯示任何內容？

來源

2012-08-26 02:13:47 curlyblueeagle

唯一的問題是內容是動態生成的。因此，每個單獨的網站都會有不同的菜單需求，所以最好在菜單中爲某些項目進行硬編碼，以便在環境中進行硬編碼。如果它是一個靜態菜單，我想做兩個單獨的列表，並將它們浮動。 – joshrathke

我打算使用jquery解決方案，因爲它很可能會在所有瀏覽器中呈現最佳效果。但我偶然發現了其他資源，這些資源包括即將在CSS3中實現的功能

包括一個強制與新的CSS3「列」功能兼容的腳本。

http://www.csscripting.com/css-multi-column/

來源

2012-08-26 23:53:20 joshrathke

臥式wordpress菜單中心的空間

回答

相關問題