Question

在我问他们之前，我总是在这里找到对我的问题的回复。现在我正面临一个关于我创建的网站（www.cichlidae.com）的响应性调整的问题，这使我在阅读几年后发布了这个问题。

在我的网站中，当达到断点时，所有页面中都会看到左侧菜单栏。我希望在使用移动设备时，根据需要在内容上显示此栏。我能够使顶部菜单栏响应显示和#bar隐藏。

为了尝试显示左侧栏菜单（标有“bar”的div），我使用了以下CSS代码：

#bar {
    display:none;
}
#bar ~ .display_bar:focus {
    display:block;
}

我首先设置#bar，因为这是加载页面后#bar的代码加载的顺序（我尝试过.display_bar：focus~＃bar）。我创建了一个在移动视图中显示的图标来激活显示开关：

<div class=\"display_bar\">Some graphic</div>

我已经尝试了所有组合和浏览器，验证了CSS和HTML，但是当单击图标时，条形图不会显示。我尝试使用带有类名而不是<p>的单个#bar标记，但它也忽略了它。可以在URL中看到其中一个页面示例：

http://www.cichlidae.com/index_catalog.php

我可能做错了什么？我需要左侧栏在移动视图中按需显示，最好只使用CSS。非常感谢您提供给我的任何帮助。

相关的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>All cichlid species - Cichlid ..</title>
    <link rel="stylesheet" type="text/css" href="design/styles/indexstyle.css" title="Cichlid ...">
    ...
</head>

<body>

<!-- left frame -->
<div id="bar">

    <a href="default.php"><img src="design/graphics/logos/logo_menu.jpg" width="200" height="165" alt="Cichlid Room Companion"></a><br><br>
    ...
    <div style="padding-left:10px;">

    <h3>Catalog</h3>

    <a href="species_classification.php">Classification</a><br>
    ....

    </div>
</div>

<!-- right frame -->
<div id="main">
<div id="canvas" style="max-width:800px">

    <!-- Menu bar -->
    <ul id="menu" class="r-hide">

        <li><a href="default.php" target="_top" class="drop">Home</a>
        <div class="dropdown_3columns">

            <h2>Welcome ...</h2>
        </div>
        </li>
    </ul>

    <div class="r-only">
    <div id="r-navigation-menu">
        <input type="checkbox" id="r-navigation-button">
        <ul class="r-menu-items">
            <h2>News</h2>
            <li><a href="whatsnew.php" target="_top">What's new</a></li>
            ....
        </ul>

        <label for="r-navigation-button" id="r-navigation-label">
            <div class="r-drop-icon">
                <img src="design/graphics/icons/menu-hamburger.png" class="icon" width="32" height="32" alt="">
                ...
            </div>
        </label>
    </div>
    <div class="display_bar" tabindex="-1"><img src="design/graphics/icons/menu-collapse.png" class="icon" width="32" height="32" alt=""></div>
</div>

使用CSS在响应式视图中按需隐藏或显示块

0 个答案: