Блог

мои возможности CSS и jquery немного плохи! Я хочу задать вам вопрос. Сегодня у меня есть боковое меню на экране рабочего стола. Когда я нажму на него в другом стиле на телефоне, другие меню будут расширены и будут иметь эффект маскировки. Как это можно сделать?

Прошел целый день, и я до сих пор не знаю, как этого добиться, поэтому я подошел, чтобы попросить вас о помощи, спасибо вам всем.

 $(this).on('clcik',function(){  $('side'). })  

 body {  background-color: #ccc; }  .demo {  display: flex; } .demo .side {  flex: 1;  background-color: #fff;  border-radius: 10px;  margin-right: 10px; } @media (max-width: 768px) {  .demo .side {  position: fixed;  left: 0;  right: 0;  height: 72px;  overflow: hidden;  } } .demo .side .side_item {  display: block;  color: #222;  text-align: center;  text-decoration: none;  padding: 30px;  border-bottom: 1px solid #ccc; } .demo .content {  flex: 2;  background-color: #fff;  padding: 10px;  border-radius: 10px; }  

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="demo"gt;  lt;ul class="side open"gt;  lt;ligt;  lt;a class="side_item" href="javaScript:;"gt;ABOUTlt;/agt;  lt;/ligt;  lt;ligt;  lt;a class="side_item" href="javaScript:;"gt;SERVICElt;/agt;  lt;/ligt;  lt;ligt;  lt;a class="side_item" href="javaScript:;"gt;CONTACTlt;/agt;  lt;/ligt;  lt;/ulgt;  lt;div class="content"gt;  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium atque accusantium soluta blanditiis in architecto ex ducimus? Alias sed quibusdam cumque autem eos rem! Amet dolore dolor totam voluptate sed at dolores saepe, nam quibusdam eos, molestiae animi quaerat perferendis, fugit accusantium debitis magni mollitia earum quia! Fugit reprehenderit dolor hic impedit debitis, maiores tempora eius natus veritatis vel totam vitae corrupti quaerat recusandae repudiandae perspiciatis odio eligendi laboriosam culpa aspernatur necessitatibus. Inventore dicta pariatur adipisci natus voluptate vero eius dolor, nihil modi ratione amet quos beatae repellendus voluptates praesentium porro unde exercitationem quisquam aliquam non? Ab dolore magnam ad a voluptatibus tempora tempore ipsam itaque aliquid optio? Autem placeat veniam doloribus dolorem consectetur voluptates architecto laboriosam magni nisi pariatur corrupti minus, unde molestiae deserunt dolores rem necessitatibus quasi sed dicta? Eveniet natus itaque, ad beatae id pariatur vel ex quo reiciendis consequuntur at expedita minima earum tenetur a ducimus quam aut repellendus possimus eos omnis. Numquam officiis quisquam recusandae repellat eius tempora, velit esse, laborum nemo, similique unde sed? Dolorem tempore et beatae in facere dignissimos fugit, quam fugiat inventore nihil quaerat esse impedit ex nobis at a molestiae neque amet consequatur soluta quidem. Reprehenderit delectus amet magnam sint. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium atque accusantium soluta blanditiis in architecto ex ducimus? Alias sed quibusdam cumque autem eos rem! Amet dolore dolor totam voluptate sed at dolores saepe, nam quibusdam eos, molestiae animi quaerat perferendis, fugit accusantium debitis magni mollitia earum quia! Fugit reprehenderit dolor hic impedit debitis, maiores tempora eius natus veritatis vel totam vitae corrupti quaerat recusandae repudiandae perspiciatis odio eligendi laboriosam culpa aspernatur necessitatibus. Inventore dicta pariatur adipisci natus voluptate vero eius dolor, nihil modi ratione amet quos beatae repellendus voluptates praesentium porro unde exercitationem quisquam aliquam non? Ab dolore magnam ad a voluptatibus tempora tempore ipsam itaque aliquid optio? Autem placeat veniam doloribus dolorem consectetur voluptates architecto laboriosam magni nisi pariatur corrupti minus, unde molestiae deserunt dolores rem necessitatibus quasi sed dicta? Eveniet natus itaque, ad beatae id pariatur vel ex quo reiciendis consequuntur at expedita minima earum tenetur a ducimus quam aut repellendus possimus eos omnis. Numquam officiis quisquam recusandae repellat eius tempora, velit esse, laborum nemo, similique unde sed? Dolorem tempore et beatae in facere dignissimos fugit, quam fugiat inventore nihil quaerat esse impedit ex nobis at a molestiae neque amet consequatur soluta quidem. Reprehenderit delectus amet magnam sint. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium atque accusantium soluta blanditiis in architecto ex ducimus? Alias sed quibusdam cumque autem eos rem! Amet dolore dolor totam voluptate sed at dolores saepe, nam quibusdam eos, molestiae animi quaerat perferendis, fugit accusantium debitis magni mollitia earum quia! Fugit reprehenderit dolor hic impedit debitis, maiores tempora eius natus veritatis vel totam vitae corrupti quaerat recusandae repudiandae perspiciatis odio eligendi laboriosam culpa aspernatur necessitatibus. Inventore dicta pariatur adipisci natus voluptate vero eius dolor, nihil modi ratione amet quos beatae repellendus voluptates praesentium porro unde exercitationem quisquam aliquam non? Ab dolore magnam ad a voluptatibus tempora tempore ipsam itaque aliquid optio? Autem placeat veniam doloribus dolorem consectetur voluptates architecto laboriosam magni nisi pariatur corrupti minus, unde molestiae deserunt dolores rem necessitatibus quasi sed dicta? Eveniet natus itaque, ad beatae id pariatur vel ex quo reiciendis consequuntur at expedita minima earum tenetur a ducimus quam aut repellendus possimus eos omnis. Numquam officiis quisquam recusandae repellat eius tempora, velit esse, laborum nemo, similique unde sed? Dolorem tempore et beatae in facere dignissimos fugit, quam fugiat inventore nihil quaerat esse impedit ex nobis at a molestiae neque amet consequatur soluta quidem. Reprehenderit delectus amet magnam sint. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium atque accusantium soluta blanditiis in architecto ex ducimus? Alias sed quibusdam cumque autem eos rem! Amet dolore dolor totam voluptate sed at dolores saepe, nam quibusdam eos, molestiae animi quaerat perferendis, fugit accusantium debitis magni mollitia earum quia! Fugit reprehenderit dolor hic impedit debitis, maiores tempora eius natus veritatis vel totam vitae corrupti quaerat recusandae repudiandae perspiciatis odio eligendi laboriosam culpa aspernatur necessitatibus. Inventore dicta pariatur adipisci natus voluptate vero eius dolor, nihil modi ratione amet quos beatae repellendus voluptates praesentium porro unde exercitationem quisquam aliquam non? Ab dolore magnam ad a voluptatibus tempora tempore ipsam itaque aliquid optio? Autem placeat veniam doloribus dolorem consectetur voluptates architecto laboriosam magni nisi pariatur corrupti minus, unde molestiae deserunt dolores rem necessitatibus quasi sed dicta? Eveniet natus itaque, ad beatae id pariatur vel ex quo reiciendis consequuntur at expedita minima earum tenetur a ducimus quam aut repellendus possimus eos omnis. Numquam officiis quisquam recusandae repellat eius tempora, velit esse, laborum nemo, similique unde sed? Dolorem tempore et beatae in facere dignissimos fugit, quam fugiat inventore nihil quaerat esse impedit ex nobis at a molestiae neque amet consequatur soluta quidem. Reprehenderit delectus amet magnam sint.eos, molestiae animi quaerat perferendis, fugit accusantium debitis magni mollitia earum quia! Fugit reprehenderit dolor hic impedit debitis, maiores tempora eius natus veritatis vel totam vitae corrupti quaerat recusandae repudiandae perspiciatis odio eligendi laboriosam culpa aspernatur necessitatibus. Inventore dicta pariatur adipisci natus voluptate vero eius dolor, nihil modi ratione amet quos beatae repellendus voluptates praesentium porro unde exercitationem quisquam aliquam non? Ab dolore magnam ad a voluptatibus tempora tempore ipsam itaque aliquid optio? Autem placeat veniam doloribus dolorem consectetur voluptates architecto laboriosam magni nisi pariatur corrupti minus, unde molestiae deserunt dolores rem necessitatibus quasi sed dicta? Eveniet natus itaque, ad beatae id pariatur vel ex quo reiciendis consequuntur at expedita minima earum tenetur a ducimus quam aut repellendus possimus eos omnis. Numquam officiis quisquam recusandae repellat eius tempora, velit esse, laborum nemo, similique unde sed? Dolorem tempore et beatae in facere dignissimos fugit, quam fugiat inventore nihil quaerat esse impedit ex nobis at a molestiae neque amet consequatur soluta quidem. Reprehenderit delectus amet magnam sint.  lt;/divgt; lt;/divgt;  

Вы можете использовать следующие медиа-запросы CSS, JS не требуется:

 @media (max-width: 999px) {  /* You can change styles with the selector in here*/ }  @media (min-width: 1000px) {  /* You can change styles with the selector in here*/ } 

Это будет работать как на рабочем столе, так и на мобильном устройстве, даже при изменении размера окна.