使用側面導航創建響應式網站

Question

我用HTML，CSS，JQuery制作管理面板。

現在我在側面導航中有問題。

打開管理面板時需要，更改標題和主容器寬度。

寬度：打開時1279像素寬度：1119像素

我的代碼：

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Admin_Panel_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap.css" rel="stylesheet" />
    <link href="../css/bootstrap-theme.css" rel="stylesheet" />
    <script src="../js/bootstrap.js"></script>
    <link href="Style%20Sheet/StyleSheet.css" rel="stylesheet" />
    <script src="../Scripts/jquery-3.0.0.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <header class="top-header">
                <section class="navigation-icon">
                    <span class="top-bar"></span>
                    <span class="middle-bar"></span>
                    <span class="bottom-bar"></span>
                </section>
            </header>
            <nav class="navigation">
                <span class="title-logo">Kia<span class="kala">Kala</span ></span>
                <section class="logo">
                     <img src="../Image/1467494806_Picasa.png"  /> 
                </section>

                <ul class="navigation-ul">
                    <li><a href="#">Space</a></li>
                    <li><a href="#">Galaxy</a></li>
                    <li><a href="#">Alien</a></li>
                    <li><a href="#">Planet</a></li>
                    <li><a href="#">Life</a></li>
                </ul>
                <section class="navigation-social">
                    <ul class="navigation-social-ul">
                        <li><a href="#" class="social-icon"></a></li>
                        <li><a href="#" class="social-icon"></a></li>
                        <li><a href="#" class="social-icon"></a></li>
                        <li><a href="#" class="social-icon"></a></li>
                    </ul>
                </section>
            </nav>
            <div class="right-col" role="main">
            </div>
        </div>
    </form>
    <script src="../Script/JQuery.js"></script>
    <script src="../Scripts/jquery-3.0.0.min.js"></script>
</body>
</html>

CSS代碼：

  body {
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

*, *:after, *:before {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}

.top-header {
    width: 1279px;
    height: 57px;
    background-color: #EDEDED;
    float: right;
    position: relative;
}

.right-col {
    float: right;
    background-color: #F7F7F7;
    width: 1119px;
    height: 1721px;
}

.navigation {
    width: 70px;
    height: 1721px;
    background-color: #2A3F54;
    float: left;
    display: block;
    transition: all 800ms cubic-bezier(.9,0,.33,1);
}

.logo {
    width: 65px;
    height: 65px;
    background-color: white;
    display: block;
    border-radius: 50%;
    margin-top: 5px;
    transition: all 800ms cubic-bezier(.9,0,.33,1);
}


    .logo img {
        width: 65px;
        height: 65px;
        display: block;
        float: left;
    }

.title-logo {
    float: right;
    margin-top: 20px;
    margin-right: 30px;
    font-family: 'Tahoma Bold';
    font-size: 35px;
    color: black;
    transition: all 800ms cubic-bezier(.9,0,.33,1);
    visibility: hidden;
}

    .title-logo .kala {
        color: red;
    }





.navigation-icon {
    width: 70px;
    margin-left: 10px;
    height: 57px;
    display: block;
    cursor: pointer;
}

    .navigation-icon .top-bar {
        width: 70px;
        height: 4px;
        display: block;
        background-color: #000000;
        position: absolute;
        top: 10%;
    }

    .navigation-icon .middle-bar {
        width: 70px;
        height: 4px;
        display: block;
        background-color: #000000;
        position: absolute;
        top: 30%;
    }

    .navigation-icon .bottom-bar {
        width: 70px;
        height: 4px;
        display: block;
        background-color: #000000;
        position: absolute;
        top: 50%;
    }

.bottom-bar, .middle-bar, .top-bar {
    margin-top: 8px;
}

.navigation-ul {
    float: right;
    margin-top: 200px;
    visibility: hidden;
    transition: all 800ms cubic-bezier(.9,0,.33,1);
}

    .navigation-ul li {
        list-style: none;
        text-align: right;
    }

    .navigation-ul a {
        text-decoration: none;
        display: block;
        font-weight: 800;
        text-transform: uppercase;
        color: white;
        margin-bottom: 15px;
    }

.navigation .navigation-social {
    width: 100%;
    height: 30px;
    float: left;
    margin-top: 30px;
    transition: all 800ms cubic-bezier(.9,0,.33,1);
}

.navigation .navigation-social-ul {
    float: right;
    list-style: none;
    visibility: hidden;
}

    .navigation .navigation-social-ul li {
        display: inline-block;
    }

.navigation .social-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    background-color: white;
}
/*_____----------__________-------- Jquery Effect -------_________--------________*/

.navigation-open {
    width: 230px;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    transition: all 800ms cubic-bezier(.9,0,.33,1);
}

    .navigation-open .title-logo {
        float: right;
        margin-top: 20px;
        margin-right: 30px;
        font-family: 'Tahoma Bold';
        font-size: 35px;
        color: black;
        transition: all 800ms cubic-bezier(.9,0,.33,1);
    }

        .navigation-open .title-logo .kala {
            color: red;
        }

jQuery代碼：

           $(document).ready(function () {
    $(".navigation-icon").click(function () {
        $(".navigation").toggleClass('navigation-open');
    });
});

Answer 1

最簡單的方法是在<body>上切換一個類並添加相應的CSS規則

$(document).ready(function () {
    $(".navigation-icon").click(function () {
        $(".navigation").toggleClass('navigation-open');
        $('body').toggleClass('nav-open');
    });
});

CSS示例

body.nav-open .top-header {
    width: 1119px;
}

使用側面導航創建響應式網站

問題描述

1 個解決方案

解決方案1
0 已采納 2016-07-04 20:16:05

使用側面導航創建響應式網站

問題描述

1 個解決方案

解決方案1 0 已采納 2016-07-04 20:16:05

解決方案1
0 已采納 2016-07-04 20:16:05