Я пробовал много вещей, но не знаю, как создать что-то вроде первого изображения ниже.
Iхотите, чтобы навигация была справа, а контент слева, как на картинке ниже, но он должен быть отзывчивым.Я был в состоянии сделать это, но я застрял в некоторых частях и удивляюсь, как это сделать.Как будто мой не полностью адаптивный, я хочу, чтобы у моего примера навигации была своя область справа, область содержимого (текст) перекрывается областью навигации, как на втором изображении, а навигация свертывания переходит в левую сторону после нажатия намобильный размер надеюсь, кто-то здесь знает, как это сделать и может помочь, пожалуйста!
Это то, что я хочу
Это то, чтоЯ придумал
Свернувшись, после щелчка как это исправить?
Код
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
h2 {
color: red;
}
ul {
list-style: none;
}
nav {
float: right;
}
.navbar-toggler {
color: #000 !important;
}
.navbar-dark .navbar-toggler {
border-color: transparent !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
</head>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="">
nav here
<li class="nav-item active">
<a class="nav-link" href="#">nav1 <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">nav2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">nav3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">nav4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">nav5</a>
</li>
</ul>
</div>
</nav>
</header>
<body>
<div class="container-fluid">
<h2>please make also the window smaller to see it on mobile size it has to be repsonive</h2>
<a href="https://i.stack.imgur.com/WV0ZN.png" target="_blank">and look like the image here.</a>
<br><br>
<h1>Content</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores enim quisquam ab! Pariatur rerum, saepe ab ex voluptate fugiat excepturi fugit libero placeat nulla praesentium, amet nobis error est vel aperiam harum sunt illum, perspiciatis laudantium
tenetur soluta! Dignissimos rerum qui ipsa, earum eaque deleniti quaerat nostrum ab veniam nam doloribus quod delectus nisi, sint, aperiam provident, voluptate labore pariatur vero voluptas! Perspiciatis sunt temporibus debitis quae aliquid sint,
atque a dicta aperiam ullam dolores tempore eligendi nemo perferendis commodi. Exercitationem aliquam quos error pariatur hic natus quaerat, ad voluptate reiciendis alias dolor! Voluptatem ullam facere nostrum illum quas excepturi, suscipit a molestiae
eaque tenetur quos quibusdam optio eveniet repudiandae incidunt necessitatibus laborum temporibus fugit ipsam distinctio sunt adipisci, esse. Hic nemo minus alias temporibus saepe ab vel, officia praesentium soluta commodi totam minima perferendis
fugiat! Delectus, iste at ipsam rerum sint itaque perspiciatis sed quibusdam alias maiores minus cumque reiciendis quas debitis harum nesciunt nobis vitae consequatur iure enim magnam unde deleniti minima velit. Labore rem pariatur qui in recusandae
autem cupiditate praesentium animi, facilis ipsam tenetur facere soluta quos eligendi similique commodi sint ad aliquid velit ipsum debitis amet tempore? Modi illo suscipit earum non quaerat minus voluptatibus enim recusandae fugit voluptas, pariatur
architecto accusantium quam iusto ullam omnis ducimus odio ipsum, molestias nihil cum quas eum. Necessitatibus vitae, odit eligendi quos nam animi illo reiciendis aperiam et, nulla. A error, facere excepturi, quidem omnis eveniet vel voluptatum
repellat mollitia eius et. Aliquid temporibus quidem, sed suscipit quo possimus, incidunt, voluptatem sequi tempore esse praesentium! Laudantium voluptates, sed aut! Dolore inventore reiciendis itaque. Hic ab delectus quos expedita odit aliquid
provident ea, consequuntur. Eligendi neque voluptatum modi eaque inventore totam quidem impedit, doloremque deserunt officia, corporis porro ut numquam, error rerum eius fugiat consequatur in eum, dolores odit nihil. Voluptatibus optio, vero magni
corporis officia, nostrum alias aliquid nesciunt ea distinctio libero iste necessitatibus dolorem sequi doloremque ipsa reiciendis exercitationem numquam fugit aperiam quaerat, nisi veniam! Repellendus, labore expedita libero rem delectus veniam
quidem ducimus non perferendis, amet obcaecati eligendi reiciendis laborum, corrupti, quaerat illo ratione. Ipsa unde tempora accusantium dolor, neque enim quia saepe labore aliquid illo temporibus earum aliquam necessitatibus voluptatibus in repellat
voluptatem dicta similique modi quasi? Similique placeat ex obcaecati saepe, voluptatum numquam animi expedita perspiciatis iste vero sed soluta, repudiandae consectetur blanditiis nisi aut voluptates ipsa, distinctio quas totam necessitatibus quasi.
Natus voluptates deserunt esse expedita assumenda similique cupiditate, explicabo fugiat aut, quibusdam deleniti. Tempore repudiandae libero neque, quas dolorum voluptatibus. Expedita corporis cumque, facilis consequatur aut, sed rerum dolor at
beatae sequi culpa quam? A molestias dolorem, fugiat optio, accusantium, inventore molestiae obcaecati non quo sit id corporis itaque voluptatum perferendis accusamus adipisci soluta cumque. Delectus, nihil. Enim ab debitis et, consectetur nisi
inventore nostrum deserunt porro dolorum, maxime repudiandae deleniti in, unde laboriosam, recusandae ducimus amet obcaecati eveniet. Ratione praesentium molestiae in corrupti voluptatem reiciendis fugiat. Omnis eligendi aperiam, ratione ab tempore
quas inventore in laboriosam similique accusantium, distinctio commodi dignissimos!
</div>
</div>
</body>
</html>