1

标题有点满嘴，但我想知道格式化我的 div 以显示底部导航栏上的按钮已被按下的最佳方式。（不是图形设计的问题）

我想的方式是在默认状态下为导航栏制作 1 个实心图像。我将在每个“按钮”周围设置一个 div 以检测按下。按下按钮时，我将在按下状态下显示按钮的单个图像。

我添加了一张很棒的图片来帮助说明我的问题。

在此处输入图像描述

另一种方法是创建 8 个独特的按钮。但是，我知道我见过的大多数 psd 都有导航栏，默认和按下，作为固体元素，图标分层。（像这样：http ://dribbble.com/shots/691632-App- net-Starter-Kit?list=tags&tag=appDOTnet )

感谢您的帮助！

4

1 回答 1

1

老实说，这种方法对我来说似乎有点沉重。

您已经有五个图像，那么为什么不创建一个包含每个按钮的按下状态和未按下状态的精灵，然后使用 CSS“背景位置”属性进行滑动呢？

你的 CSS 看起来像：

div.buttons {
 background-image: url(images/myimage.png);
 background-position: 0 0;
 position:relative;
 width:64px;
}
div.buttons.dog{
 background-position: 0 32px;
}
div.buttons.cat{
 background-position: 0 64px;
}
div.buttons div.dog{
 position:absolute;
 left: 0;
 top: 0;
 width: 32px;
 height: 32px;
 border: transparent 1px solid;
}
div.buttons div.cat{
 position:absolute;
 left: 32px;
 top: 0;
 width: 32px;
 height: 32px;
 border: transparent 1px solid;
}

使用您的 HTML 为：

<div class="buttons">
 <div class="dog"></div>
 <div class="cat"></div>
</div>

然后是 jQuery 的一些简单的东西，例如：

$('div.buttons').children().each(function(){
  $(this).click(function() { $(this).parent().addClass($(this).attr('class')).removeClass($(this).siblings().attr('class'));
});

更新

根据提问者的要求，以下是在按钮层上实现 div 覆盖的方法。首先，从div.buttons顶部的 CSS 块开始，仅使用您的图像作为默认“关闭”位置的按钮而不是精灵。

然后，创建四个这样的容器（我在div这里使用了 s，但您可以想象使用任何为容器提供适当语义上下文的元素）。

CSS

div.buttons{
 background-image: url(images/myimage.png);
 background-position: 0 0;
 position:relative;
 width:136px; /* whatever your width for the image is */
}

div.fish, div.rabbit, div.dog, div.cat {
 position: absolute;
 top: 0;
 background-size: cover;
 height: 24px; /* Whatever the height of your buttonbar is */
}
div.cat{
 width: 32px; /* Width of your button */
 left: 0;
 background-image: none;
}
div.on.cat {
 background-image: url(path/to/catImage.png);
}
div.dog {
 left: 32px; /* The width of the preceding button(s), if they exist */     
 width: 40px; /* Width of your button */
 background-image: none;
}
div.on.dog {
 background-image: url(path/to/dogImage.png);
}
div.rabbit {
 left: 72px; /* The width of the preceding button(s), if they exist */     
 width: 32px; /* Width of your button */
 background-image: none;
}
div.on.rabbit {
 background-image: url(path/to/rabbitImage.png);
}
div.fish {
 left: 104px; /* The width of the preceding button(s), if they exist */     
 width: 40px; /* Width of your button */
 background-image: none;
}
div.on.fish {
 background-image: url(path/to/fishImage.png);
}

HTML

<div class="buttons">
   <div class="cat"></div>
   <div class="dog"></div>
   <div class="rabbit"></div>
   <div class="fish"></div>
</div>

这假设您的 div “包装”按钮切片具有与其动物匹配的类，但这显然可以是您想要的任何内容。然后，在单击事件中，您只需将所需的类应用于按下的按钮。您将使用的 jQuery 如下所示：

jQuery

$('.buttons > div').on('click',function(){
    var t = $(this);
    t.siblings.removeClass('on');
    t.addClass('on');

    //Whatever your button is supposed to do normally here
});
于 2013-03-07T22:17:18.883 回答