显示网页导航的平铺精灵图像

我正在尝试编程我的网站的导航栏，因此当选择该页面时，精灵索引更改为突出显示背后的背景，如按钮。显示网页导航的平铺精灵图像

所以第一个按钮在第一块高亮显示，第二，在未来等

但是我还使用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;} –

嗨，这取决于您的商店中的主题 - 我只发布了如何引导引擎创建导航元素以及如何选择菜单中的活动元素 - 知道应该可以稍微更改未选定和选定菜单元素的主题渲染 - 但确切的影响 - 如上所述 - 取决于我认为您帐户的主题。 –

显示网页导航的平铺精灵图像

回答

相关问题