制作纯 CSS Dock答案

【问题标题】：Making a Pure CSS Dock制作纯 CSS Dock
【发布时间】：2023-04-11 10:50:02
【问题描述】：

在玩过 CSS 3 之后，我有了一个疯狂的想法，就是用它制作一个 OS X 风格的 Dock（一个 DIV 容器，里面有元素，它使用 CSS :hover 子类，在鼠标悬停时会增加大小）。但是，我在实现它时遇到了一些奇怪的效果。到目前为止，这是我尝试过的：

代码

<html>
<head>
<style>
body{
    margin:0;
}
.dockHolder{
    width:100%;
    position:absolute;
    text-align:center;
    display:block;
    bottom:0;
}
.dock{
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    text-align:center;
}
.dockItem{
    height:50%;
    display:inline-block;
    position:relative;
    bottom:0;
    vertical-align:bottom;
    text-align:center;

    transition-property:width, height;
    -o-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:linear;
    -o-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
    -webkit-transition-timing-function:linear;
}
.dockItem:hover{
    height:100%;
    width:auto;
}
</style>
</head>
<body>
<div class="dockHolder" style="height:64px;max-height:64px;border:1px solid black;">
    <div class="dock" style="background-color:lightgray;">
        <center>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="pony.png" /></div>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="bhs256.png" /></div>
        </center>
    </div>
</div>
</body>
</html>

如果你想看看我目前有什么，我的测试页面位于 ~~http://s.supuhstar.operaunite.com/s/content/testAnims.htm~~（死于 Opera Unite）。

缺少功能

意外影响包括：

无法将dock 元素放在dockHolder 元素的底部
dockItem 元素不随其子图像横向扩展
dockItem 和 dock 元素不会在带有 CSS 的 dockHolder 容器内居中（尝试过 margin:auto;、box-pack:center;、box-align:center; 等）；只有<center> HTML 标签有效
在 Opera 和 Firefox（我已经放弃 IE）中，dockItems 非常广泛

不存在的

预期效果包括：

dockItems 保持在 dock 元素中直到调整大小，此时它们与 dockHolder 元素的大小成比例地增加，但 dock 元素保持相同的大小
dock 元素的宽度始终仅足以包含其中的所有 dockItems，并且永远不会比所有 dockItems 及其边距的组合宽度更宽。

问题

有没有人有解决方案可以修复意外效果并实现缺少的预期效果？

最终实现

下面是我最终解决方案的代码：

<!DOCTYPE html><html>
<head>
<style type='text/css'>
body{
    margin:0;
}
.dockHolder {
    position: fixed;
    text-align: center;
    bottom: 0; 
    left: 0;
    right: 0;
    height: 128px;
    line-height: 128px;
}

.dock {
    background:#CCCCCC;
    background:
        -o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    border: 1px solid gray;
    max-width:100%;
    vertical-align: bottom;
    line-height: 1em;
    padding: 0 8px;
    border-radius: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dockItem {
    display: inline;
    height: 50%;
    vertical-align: bottom;

    transition-property:width, height;
    -o-transition-property:width, height;
    -ms-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -ms-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:ease-in-out;
    -o-transition-timing-function:ease-in-out;
    -ms-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
    -webkit-transition-timing-function:ease-in-out;
}
.dockItem:hover {
    height: 100%;
}
.dockItem:active {
    vertical-align:top;
    height:95%
}
</style>
</head>
<body>
    <div class="dockHolder" style="height:128px;line-height:128px;">
        <span class="dock">
            <img class="dockItem" src="pony.png"/>
            <img class="dockItem" src="bhs256.png"/>
            <img class="dockItem" src="mcgrass.png"/>
        </span>
    </div>

</body>
</html>

工作示例（可能会过时）：~~http://admin.s.supuhstar.operaunite.com/s/content/testDock.html~~（死于 Opera Unite）

【问题讨论】：

我知道。继续阅读;我试过 CSS 居中
你为什么同时使用style属性和.docHolder元素的CSS规则？
.dock 元素在哪里？我只在您的 HTML 代码中看到 .dockHolder 和 .dockItem 元素。
这样我就可以看到dockHolder 在哪里。其结果是最终用户看不到它，但这在现阶段适得其反。我还在dock 中使用style 属性，以便使用此API 的人可以选择自己的停靠颜色和高度（我不喜欢这样的任意选择）。我只在dockItems 中使用它来进行调试。
@ŠimeVidas 抱歉，我一定是在编辑时删除了它……它是dockHolder 中的第一个元素，它包含dockItems

标签： html css cross-browser dock

【解决方案1】：

怎么样？

HTML：

<div class="dockbg"></div>
<div class="dock">
    <img src="foo.png">
    <img src="bar.png">
</div>

CSS：

.dockbg {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
    background: #bbb;
}

.dock {
    position: fixed;
    text-align: center;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 100px;
    line-height: 100px;
}

.dock img {
    display: inline-block;
    vertical-align: bottom;
    height: 50%;
    padding: 0 5px;
    /* + your animation properties */
}


.dock img:hover {
    height: 100%;
}

现场演示： http://jsfiddle.net/simevidas/QM7M7/3/show/

【讨论】：

@Supuhstar 为什么你需要dock 和dochHolder？
dock 是用户看到的扩展坞（它像 Mac OS X 一样环绕 dockItems），而 dockHolder 是拥有 dock 和所有它的项目，指定“放大”项目的最大尺寸
@Supuhstar 我已经更新了我的演示。这有点小技巧——我把“码头”放在了背景中，而一个透明的码头支架包含了前景中的图标......
close... 但与停靠栏不同的是，它始终跨越屏幕的宽度，而不是与图标一致。查看我的最新编辑以了解我最接近的尝试
@ŠimeVidas 真正非常棒的是，如果您可以制作不同的版本来停靠左侧和右侧的菜单。因为老实说，这是迄今为止我见过的最好的停靠菜单，也是最优雅的......我只是不希望它在底部，而且我的 CSS 技能还不足以弄清楚如何修改你的并使其浮动正确... :)

【解决方案2】：

对我来说，问题在于您没有指定固定的宽度尺寸。我的想法是取消 dockItem 类，你不需要它。直接使用 CSS img 类。
要使元素居中，请使用“margin : auto 0px auto 0px;”。
首先，使用重置，它将帮助您正确执行此操作：http://html5doctor.com/html-5-reset-stylesheet/#comment-18168
您应该使用 display:block；和浮动：左；比 display:inline-block;
您应该使用<ul> 和<li> 元素来帮助您。

【讨论】：

使用float:left; 使dock 与项目的大小相同，并将dock 及其项目放在dockHolder 的左上角，使用display:block; 使项目跨越整个宽度的dock。另外，我应该在哪里以及为什么要使用ul 和li？

【解决方案3】：

使用 javascript 和 css 使悬停图标之前和之后的图标也更大一点，以获得更流畅的动画；）

【讨论】：

问题是关于 CSS3，所以使用 Javascript 的想法毫无意义，但我必须同意这是个好主意