当前位置： 文江博客 话题详情

当用户最小化浏览器窗口时，如何使 CSS/HTML 类别菜单优雅地最小化？

发布于 2024-09-13 03:26:41 字数 2858 浏览 3 评论 0 原文

我的问题

当我最小化浏览器窗口时，类别菜单没有按照我希望的方式最小化。我希望当窗口最小化时， li 元素逐一下降到其他 li 元素下方。问题在于整个 ul 元素被放置在 p 元素下方。

菜单的实例位于此处。
实时示例的代码位于此处。

这是全尺寸窗口中的类别菜单。请注意，主类别和子类别灰色 p DIVS 并未处于最大高度，即使我已将其高度设置为 100%。橙色和黄色 DIV 称为 #main 和 #sub。紫色 DIV 是 ul 元素，其中包含文本的浅色块是 li 元素。 替代文本 http://lh3.ggpht.com/ _rNlSpSUBkYo/TF08FsFrA4I/AAAAAAAAAFw/hZm7flu032A/cat-full-size.jpg

这是一个 861px 宽的窗口。没有变化... 替代文本 http://lh3.ggpht.com/ _rNlSpSUBkYo/TF08GYxMMhI/AAAAAAAAAF0/nFpr-pV3eF4/cat-861px.jpg

这里它位于 777px 窗口中。在这里，您可以看到黄色 #sub DIV 中的整个紫色 ul 元素正好落在灰色子类别 p 元素下方 替代文本 http://lh5.ggpht.com/_rNlSpSUBkYo/ TF08H2tAA8I/AAAAAAAAAF4/VH5Wo46HCgg/cat-777px.jpg

这里它位于 731px 窗口中。在这里，我们可以看到橙色 #main DIV 中的紫色 ul 元素也落在主类别 p 元素下方。 替代文本 http://lh3.ggpht.com/_rNlSpSUBkYo/ TF08IUMAXRI/AAAAAAAAAF8/pqmPpOgVv_Y/cat-731px.jpg

这是在 721px 窗口中。最后我们可以看到，随着黄色 #sub DIV 进一步最小化，li 元素开始下降一个级别。

我现在寻求的解决方案

我想向您展示我在 Photoshop 中构建的模型所追求的结果。

在这里，我们可以看到包含文本“主类别”和“子类别”的灰色 p 元素现在处于其 #main 和 #sub 的完整高度包含 DIV。另外，更重要的是，我们可以看到整个 ul 元素不再低于灰色 p 元素。 替代文本 http://lh3.ggpht.com/ _rNlSpSUBkYo/TF08LBmFWnI/AAAAAAAAAGM/WLQx_wVsSQw/cat- Correct-777px.jpg

最后我们可以看到 #main DIVs 紫色 ul 元素最小化，就像 < strong>#sub DIV 紫色 ul 元素在上面的屏幕截图中执行了操作。 替代文本 http://lh6.ggpht.com/ _rNlSpSUBkYo/TF08L0F5OoI/AAAAAAAAAGQ/isdjLp6m_rs/cat- Correct-731px.jpg

此处图像的全尺寸图像可以在我的 Picassa 相册

有关如何解决此问题的任何想法吗？

原文

My Problem

When I minimize the browser window the category menu does not minimize the way I would like it to. I would like the li elements to drop one by one below the other other li elements as the window is minimized. The problem is that the whole ul element is dropped below the p element.

A live example of the menu is located here.
The live example's code is located here.

Here is the category menu in a full size window. Notice the Main Categories and Sub Categories gray p DIVS are not at max-height even though I have set their height to 100%. The orange and yellow DIVs are called #main and #sub. The purple DIV is the ul element and the lightly colored blocks with text in them are the li elements.
alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08FsFrA4I/AAAAAAAAAFw/hZm7flu032A/cat-full-size.jpg

Here it is in a 861px wide window. No change...
alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08GYxMMhI/AAAAAAAAAF0/nFpr-pV3eF4/cat-861px.jpg

Here it is in a 777px window. Here you can see the entire purple ul element in the yellow #sub DIV just drops below the gray Sub Categories p element
alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TF08H2tAA8I/AAAAAAAAAF4/VH5Wo46HCgg/cat-777px.jpg

Here it is in a 731px window. Here we can see the purple ul element in the orange #main DIV also drops below the Main Categories p element.
alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08IUMAXRI/AAAAAAAAAF8/pqmPpOgVv_Y/cat-731px.jpg

Here it is in a 721px window. Finally we can see that the li elements begin to drop down a level as the yellow #sub DIV minimzes even more.

The Solution I Seek

Now I would like to show you the results I am after with mock ups I constructed in Photoshop.

Here we can see the gray p element containing the text Main Categories and Sub Categories are now at the full height of their #main and #sub containing DIVs. Also and more importantly, we can see that the entire ul element no longer drops below the gray p element.
alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08LBmFWnI/AAAAAAAAAGM/WLQx_wVsSQw/cat-correct-777px.jpg

And finally we can see #main DIVs purple ul element minimize propely just as the #sub DIVs purple ul element did in the screen shot above.
alt text http://lh6.ggpht.com/_rNlSpSUBkYo/TF08L0F5OoI/AAAAAAAAAGQ/isdjLp6m_rs/cat-correct-731px.jpg

Full size images of the images here can be seen at my Picassa album

Any ideas on how to fix this?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

情绪失控 2024-09-20 03:26:41

我没有时间完成这个，但在完成它之后，这就是我得到的：
（在这里发布是因为保存功能似乎不起作用）。

<!DOCTYPE html>
<html>
  <head>
    <title>
      Categories DIV Problem
    </title>
    <style type="text/css">
      /*** GLOBAL ***/

      *
      {
        padding: 0;
        margin: 0 auto;
        outline: none;
      }

      html, body
      {
        height: 100%;
        font: .9em Arial ,san-serif;
      }

      ul, li
      {
        list-style: none;
      }

      .clear
      {
        clear: both;
      }  

      /*** PAGE ***/

      #container
      {
        max-width: 1000px;
        width: 85%;
        height: auto;
        min-height: 100%;
        margin: 0 auto;
      }

      /*** CATEGORIES ***/

      #categories
      {

        height: 100%;
        /* padding: 20px; */
        margin: 5px 0 0 0;
      }

      #main
      {
        background: orange;
        height:50px;

      }

      #sub
      {
        background: yellow;
      }

      #cat-main
      {

      }

      #cat-sub
      {
        float: left;
      }

      .cat-name-box
      {
        float: left;
        height: 100%;
        background: #ddd;
      }

      .cat-choice-box
      {
        width:auto;
        background: purple;

      }


      #categories li
      {
        float: left;
        padding: 3px 8px;
        margin: 1px;
      }

      #cat-main li
      {
        background: #D7B0FF;
      }

      #cat-main li:hover
      {
        cursor: pointer;
        background: #9A38FF;
        color: #fff;
      }  

      #cat-sub li
      {
        background: #85FF87;
      }

      #cat-sub li:hover
      {
        cursor: pointer;
        background: #00C403;
        color: #fff;
      }    

    </style>
  </head>
  <body>
    <div id="container">
      <div id="categories">
        <div id="main">
          <div class="cat-name-box">Main Categories</div>
          <ul class="cat-choice-box" id="cat-main">
            <li>Technology</li>
            <li>Politics</li>
            <li>Business</li>
            <li>Science</li>
            <li>Music</li>
            <li>Film</li>
            <li>Art</li>
            <li>Health</li>
            <li>Sports</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

问题是在文本+ ul 的容器上设置的高度，必须为p 元素设置它（我认为我将其更改为div，不记得为什么）以继承100％的高度。

希望这会有所帮助，尽管我知道这不是完整的解决方案。

I haven't got the time to finish this but after working on it this is what I got:
(Posting here cause the save function didn't seem to work).

<!DOCTYPE html>
<html>
  <head>
    <title>
      Categories DIV Problem
    </title>
    <style type="text/css">
      /*** GLOBAL ***/

      *
      {
        padding: 0;
        margin: 0 auto;
        outline: none;
      }

      html, body
      {
        height: 100%;
        font: .9em Arial ,san-serif;
      }

      ul, li
      {
        list-style: none;
      }

      .clear
      {
        clear: both;
      }  

      /*** PAGE ***/

      #container
      {
        max-width: 1000px;
        width: 85%;
        height: auto;
        min-height: 100%;
        margin: 0 auto;
      }

      /*** CATEGORIES ***/

      #categories
      {

        height: 100%;
        /* padding: 20px; */
        margin: 5px 0 0 0;
      }

      #main
      {
        background: orange;
        height:50px;

      }

      #sub
      {
        background: yellow;
      }

      #cat-main
      {

      }

      #cat-sub
      {
        float: left;
      }

      .cat-name-box
      {
        float: left;
        height: 100%;
        background: #ddd;
      }

      .cat-choice-box
      {
        width:auto;
        background: purple;

      }


      #categories li
      {
        float: left;
        padding: 3px 8px;
        margin: 1px;
      }

      #cat-main li
      {
        background: #D7B0FF;
      }

      #cat-main li:hover
      {
        cursor: pointer;
        background: #9A38FF;
        color: #fff;
      }  

      #cat-sub li
      {
        background: #85FF87;
      }

      #cat-sub li:hover
      {
        cursor: pointer;
        background: #00C403;
        color: #fff;
      }    

    </style>
  </head>
  <body>
    <div id="container">
      <div id="categories">
        <div id="main">
          <div class="cat-name-box">Main Categories</div>
          <ul class="cat-choice-box" id="cat-main">
            <li>Technology</li>
            <li>Politics</li>
            <li>Business</li>
            <li>Science</li>
            <li>Music</li>
            <li>Film</li>
            <li>Art</li>
            <li>Health</li>
            <li>Sports</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

Problem is the height set on the container of the text + ul, it has to be set for the p-element(I changed it to div I think, can't remember why)to inherit the 100% height.

Hope this kind of helps though I know this isn't the entire solution.

回复 原文
可可 2024-09-20 03:26:41

我要做的就是将 display: table; 添加到 ul 元素并去掉 float:left。现在，它可以按照我的意愿在 Firefox、Chrome、IE、Opera 和 Safa 上最小化 这是指向新版本的链接更新代码

What I had to do was to add display: table; to the ul element and get rid of float:left. Now it minimizes as I would like across Firefox, Chrome, IE, Opera and Safa Here is the link to the new updated code

回复 原文
~没有更多了~

关于作者

魔

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文