0
CSSとJavaスクリプトのビットを使ってサイドメニューバーを作成しましたが、サイドバーの幅に合わせてリスト要素を編集しようとすると、マージンからはじまります。どこが間違っていたのですか？サイドメニューのリスト要素を編集する
// JavaScript Document//
$('.nav-side .nav-toggle').on('click', function(e){
\t e.preventDefault();
\t $(this).parent().toggleClass('nav-open');
});@charset "utf-8";
body
{
\t font: 16px "Helvetica",sans-serif;
\t line-height: 1.4;
\t font-weight: 200;
\t background-color: #563838;
}
.wrapper
{
\t margin: 0 auto;
\t width: 1160px;
\t text-align: center;
\t position: relative;
\t top: 230px;
}
.nav-side
{
\t position: fixed;
\t left: 0;
\t top: 0;
\t height: 100%;
\t width: 100%;
\t max-width: 250px;
\t background-color: rgba(8, 120, 164, 0.9);
\t box-sizing: border-box;
\t color: brown;
\t margin-left: -250px;
\t transition: margin 600ms ease-in-out;
}
.nav-side.nav-open
{
\t margin-left: 0;
\t box-shadow: 1px 1px 3px rgba(0,0,0,.1);
}
.nav-side ul
{
\t list-style: none
}
.nav-side ul li
{
\t height: 70px;
\t
\t background-color: antiquewhite;
\t left: 0;
}
.nav-toggle
{
\t position: absolute;
\t right: -70px;
\t top: 10px;
\t width: 70px;
\t height: 70px;
\t background-color: rgba(30, 207, 214, 0.1);
\t line-height: 70px;
\t text-decoration: none;
\t text-align: center;
\t border-top-right-radius: 3px;
\t border-bottom-right-radius: 3px;
\t box-shadow: 1px 0 3px rgba(0,0,0, .1);
}
.nav-toggle:hover
{
\t background-color: #1ecfd6;
\t cursor: pointer;
}
.nav-toggle:before
{
\t content: "";
\t font-weight:900;
\t color: white;
\t font-size: 32px;
\t padding-left: 5px;
}
.nav-side.nav-open .nav-toggle:before
{
\t content: "";
\t right: 0;
}
.logo
{
\t width: 100%;
\t height: 225px;
\t text-align: center;
\t position: fixed;
\t background-color: #272424;
\t top: 0;
\t left: 0;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flavour Dome</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil ia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
\t </div>
\t <div class="logo"><img src="../../Pictures/fd logo.png" alt="Flavour Dome"/></div> \t
\t <nav class="nav-side" nav-open>
\t \t <a href="#" class="nav-toggle"></a>
\t \t <ul>
\t \t \t <li>
\t \t \t \t Home
\t \t \t </li>
\t \t \t <li>
\t \t \t \t Menu
\t \t \t </li>
\t \t \t <li>
\t \t \t \t Store
\t \t \t </li>
\t \t \t <li>
\t \t \t \t Account
\t \t \t </li>
\t \t \t <li>
\t \t \t \t Shopping Cart
\t \t \t </li>
\t \t </ul>
\t </nav> \t
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
\t <script src="js/script.js"></script> \t
</body>
</html>は、どのように私は私のリストの要素は、私のサイドメニューの幅を取り付ける代わりに、それらの左マージンから遠く始まる得ることができますか？
ありがとうございます。実際に働いた –
うん。どういたしまして ：-） – frnt