顯示網頁導航的平鋪精靈圖像

我正在嘗試編程我的網站的導航欄，因此當選擇該頁面時，精靈索引更改爲突出顯示背後的背景，如按鈕。顯示網頁導航的平鋪精靈圖像

所以第一個按鈕在第一塊高亮顯示，第二，在未來等

但是我還使用weebly，我試圖程序是越來越多的自己的精靈垂直平鋪學習，所以導航代碼自動完成，因此我不知道如何實現它，所以當頁面被選中時，後面的按鈕被突出顯示。

理論上我明白怎麼做，我只是不確定使用什麼函數，因爲我是全新的CSS。我要做的是： 1.計算出哪個代碼將當前網頁作爲變量返回 2.使用以下代碼計算平鋪背景的新位置：（網頁位置）*精靈高度或輸入：if webpage =菜單sprite_position = 1 * sprite_height

關於到導航當前的代碼是：

#navigation { 
    font-family: Ethnocentric, arial, sans-serif; 
    position: relative; 
    width: 1082px; /*For adjusting the navigation's usable width*/ 
    height: 29px; 
    z-index: 2; 
    padding: 11px 0px 0px 45px; /*Fourth argument changes the starting navigation postion*/ 
    background: url(Ngbck.png) no-repeat; 
    _bbbackground: none; 
    _fffilter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='files/theme/navigationbg.png', sizingMethod='crop'); 
} 

#navigation ul li { 
    float: left; 
    font-size: 16px; 
    text-transform: uppercase; 
    padding: 0px; 
    margin: 4px 0px 0px 40px; 
} 

#navigation ul li a { 
    color: #0bf; 
} 

#navigation ul li a:hover, #navigation ul li#active a { 
    color: #f00; 
} 

#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 13px 0px 0px 0px; } 
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; } 
#weebly-menus .weebly-menu li { float: left; clear: left; width: 168px; text-align: left; } 
#weebly-menus .weebly-menu li a { position: relative; display: block; width: 148px; background: #001020; border-top: none; border-bottom: 1px solid #404a51; border-right: 1px solid #404a51; border-left: 1px solid #404a51; text-decoration: none; font-size: 12px; font-weight: normal; line-height:1; padding: 8px 6px 8px 12px; color: #0bf; } 
#weebly-menus .weebly-menu li a:hover { background: #131f28; color: #c00; }

來源

2013-11-24 Fluidic Ice

Weebly的發動機增加了

#active

標識符當前所選菜單的LI元件。此標識符應用於菜單中的列表元素，並且此更改取決於您目前的頁面。

所以我認爲爲了修改這樣的菜單的外觀，您需要在模板編輯器中添加選擇器，如#navigation ul li#active或#navigation ul li#active a（取決於效果），以便選擇您的自定義樣式。

人們必須呈現Weebly的頁面還沒有代碼沒有太大的訪問 - 但也有一些特定的規則 - （？企鵝模板）這樣的人設計客戶模板Weebly的已經

彼得

來源

2013-11-24 20:22:18

嗯，我嘗試了你提到的幾種不同的方式最終沒有奏效，但我覺得下面的代碼接近答案，但我只是需要幫助正確的做到這一點：#navigation ul li a.blogs {background-position： 0px 58px;} #navigation ul li a.mygames {background-position：0px 87px;} #navigation ul li a.videos {background-position：0px 116px;} –

嗨，這取決於您的商店中的主題 - 我只發佈瞭如何引導引擎創建導航元素以及如何選擇菜單中的活動元素 - 知道應該可以稍微更改未選定和選定菜單元素的主題渲染 - 但確切的影響 - 如上所述 - 取決於我認爲您帳戶的主題。 –

顯示網頁導航的平鋪精靈圖像

回答

相關問題