Question

因此，我正在为新网站创建一个菜单，并且我正在尽最大努力使其具有移动响应能力。菜单中的每个项目都有一个图标和一个名称。当屏幕为全宽时，两者都会显示，文本位于图标下方。

我已将其设置为当用户滚动链接时，文本会更改颜色，图标的背景图像也会更改。

当屏幕变小时，文字会消失，只留下图标。目前，当用户在此模式下滚动其中一个图标时，文本将显示在下方，但它也会移动元素并向上移动图标。我希望能够让图标在翻转时保持在相同的位置，并在不改变宽度或破坏其他图像的情况下显示文本。

我做了一个关于我希望它看起来的小模型，以及我当前的解决方案here。

系统使用Foundation但我无法编辑任何js，我只能在我的css文件和菜单的HTML部分中工作。菜单两侧有两个元素，没有图示。

这是我的菜单HTML的一部分。

<div id="icon-menu" class="medium-9 columns">
    <div class="menu-item">
        <a href="/home">
            <div id="nav-home"></div>
            <span>Home</span>
        </a>
    </div>
    <div class="menu-item">
        <a href="/my-learning">
            <div id="nav-my-learning"></div>
            <span>My Learning</span>
        </a>
    </div>
</div>

这是我的css，有一个翻转示例：

#logo img{
    max-width: 60px;
    width: 100%;
}

#icon-menu{
    text-align: center;
}

.menu-item{
    display: inline-block;
    margin: 0px 15px;
}

.menu-item a{
    font-size: 0.9rem;
    color: #606060;
}

.menu-item a:hover{
    color: #803589;
    font-weight:400;
}

.menu-item div{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 30px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1250px) {
    .menu-item span{
        display: none;
    }

    .menu-item div{
        height:50px;
    }

    .menu-item a:hover span{
        display: initial;
        position: relative;
    }

    .menu-item a:hover div{
        height: 30px;
    }
}

/*------Styling the Menu Hovers------*/

#nav-home{
    background-image: url("/site/img/icon_home.png");
}

.menu-item a[href="/home"]:hover #nav-home{
    background-image: url("/site/img/icon_home_purple.png");
}

您可以在JSFiddle上查看我的代码的完整版本。

感谢所有帮助！谢谢！

Answer 1

这是我更新的小提琴：https://jsfiddle.net/cameronjonesweb/a5rso6xy/2/

这就是我做的事情

将.menu-item设为position:relative

在媒体查询中，将.menu-item span设置为此

.menu-item span {
    position: absolute;
    top: 100%;
    white-space: nowrap;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

这将跨越对象流，并将其置于图标下方。

从.menu-item div

中删除该高度

Answer 2

在您希望换行并导致元素变高的文本上：

max-width: <yourWidth>;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

这会阻止文本换行，但它也会使包裹的部分变得不可读;这可能不是最佳解决方案。

查看此fiddle

更好的解决方案是确保元素足够宽以容纳您将要使用的最大文本字符串，您可以使用水平或垂直堆叠的一些@media查询动态调整这些文本取决于视口宽度。

在悬停时显示图像下方的文本而不破坏其他元素

2 个答案: