0

所以我有这个导航菜单设置，尽管目前有 CSS 代码。背景颜色目前主要用于苦行者。我需要在这个设置上有一个背景图像。不幸的是，由于所提出的设计规范，它也不是真正的流动背景。所以就这样。

我需要制作这个背景和包含的元素，以使导航按照我希望根据整体窗口大小调整大小的方式工作。从桌面浏览器到移动设备。

有没有人知道单独使用 CSS 或结合 jQuery 之类的东西来实现这一点？我在某些平台上看到过类似的做法，但不知道他们是如何解决解决方案的

/* wrapper and master settings for over all containers */
#menu_bottom{position:absolute;bottom:0;left:0;z-index:999999;background-color:#F00;width:320px;height:172px;}
#menu_bottom > ul{list-style:none;margin:0;padding:0;}
#menu_bottom > ul > li{list-style:none;margin:0;padding:0;float:left;width:50px;height:172px;background-color:#000;}
/* inactive state (position) */
#menu_bottom > ul > li.fans{background-color:#0F0;}
#menu_bottom > ul > li.gameplan{background-color:#0F0;}
#menu_bottom > ul > li.dashboard{background-color:#0F0;}
#menu_bottom > ul > li.myteams{background-color:#0F0;}
#menu_bottom > ul > li.settings{background-color:#0F0;}

/* active state (position) */
#menu_bottom > ul > li.fans.active{background-color:#00F;}
#menu_bottom > ul > li.gameplan.active{background-color:#00F;}
#menu_bottom > ul > li.dashboard.active{background-color:#00F;}
#menu_bottom > ul > li.myteams.active{background-color:#00F;}
#menu_bottom > ul > li.settings.active{background-color:#00F;}

<div id="menu_bottom">
    <ul>
        <li rel="/" class="f<?php if($activeNav == "c"){echo ' active';} ?>"></li>
        <li rel="/" class="g<?php if($activeNav == "n"){echo ' active';} ?>"></li>
        <li rel="/" class="d<?php if($activeNav == "d"){echo ' active';} ?>"></li>
        <li rel="/" class="m<?php if($activeNav == "f"){echo ' active';} ?>"></li>
        <li rel="/" class="s<?php if($activeNav == "s"){echo ' active';} ?>"></li>
    </ul>
</div>
4

1 回答 1

0

您必须为所有内容设置一个整体包装器，并在 CSS 中将其设置为 100% 宽度

于 2013-04-19T05:46:36.473 回答