Is it possible to create such a menu without using js? while only absolute positioning and shifting by a given number of pixels up / down with jquery, which I didn’t really want to use, comes to mind

enter image description here

upd: in the end I did something similar with jquery, if someone needs working code:

/* приминает: id элемента, сдвиг в пикселях, у меня с двух сторон слайдеры, по этому сторону слайдера */ function carousel(id, topPl, side) { var p1 = 'calc(50% - ' + topPl + 'px)'; $('#' + side + '-checker').css('top', p1); $('#' + side + '-' + id).siblings().css('opacity', 0.3); $('#' + side + '-' + id).css('opacity', 1); } 
 html { font-family: sans-serif; } /* Carousels */ .carousel { box-shadow: inset 0px 0px 10px 5px rgba(255, 255, 255, 0.5); } .carousel ul { position: absolute; width: 100%; top: calc(50% - 280px); margin: auto; padding: 0; list-style: none; -webkit-transition: 0.1s linear; transition: 0.1s linear; } .carousel li { display: block; height: 80px; cursor: pointer; color: #fff; text-transform: uppercase; text-align: center; line-height: 80px; } #left-carousel { width: 350px; height: 100vh; background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; } #left-carousel #choise { position: absolute; top: calc(50% - 25px); left: 325px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="carousel" id="left-carousel"> <ul id="left-checker"> <li id="left-1" onclick="carousel(1,40,'left')">text</li> <li id="left-2" onclick="carousel(2,120,'left')">text</li> <li id="left-3" onclick="carousel(3,200,'left')">text</li> <li id="left-4" onclick="carousel(4,280,'left')">text</li> <li id="left-5" onclick="carousel(5,360,'left')">text</li> <li id="left-6" onclick="carousel(6,440,'left')">text</li> <li id="left-7" onclick="carousel(7,520,'left')">text</li> </ul> </div>

  • 3
    What is the operating principle of this menu? It seems to me quite real - koks_rs
  • @koks_rs, there is ul, when you click on li - it becomes in the center of the parent div, moving up / down the entire ul - nueq
  • As far as I remember, in Skyrim, when selecting (for example, from the current in the photo) list item, others move higher or lower, making the selected element in the center. Alas, the css can not! But don't be upset. The script is not so complicated to be implemented. - VostokSisters
  • @VostokSisters, you remember correctly) - nueq
  • @nueq, this is the maximum that I saw, did a selective menu through pure css. You can search on codepen itself through the query "selective menu". - VostokSisters

3 answers 3

Invented the method even easier

It is necessary to place the hidden radio above element. And the buttons themselves make a label with links to these radio

Pressing the label activates the radio , which shifts the block from the menu.

 input { display:none } #items{ position:relative; top:50px; transition: top .5s; } #items label{ display:block; height:25px; } #p1:checked~#items{top:50px;} #p2:checked~#items{top:25px;} #p3:checked~#items{top:0px;} #p4:checked~#items{top:-25px;} #p5:checked~#items{top:-50px;} #active{ border:1px solid red; top:50px; position:absolute; width:100px; height:25px; } 
 <input type=radio id="p1" name="menu"> <input type=radio id="p2" name="menu"> <input type=radio id="p3" name="menu"> <input type=radio id="p4" name="menu"> <input type=radio id="p5" name="menu"> <div id="items"> <label for="p1">Пункт 1</label> <label for="p2">Пункт 2</label> <label for="p3">Пункт 3</label> <label for="p4">Пункт 4</label> <label for="p5">Пункт 5</label> </div> <div id="active"></div>

  • instead of radio, you can use the : target selector. Although not, in the current case may not help :-) - Grundy
  • @Grundy c :target have a solution - Crantisz
  • Yeah, looked it up :-) - Grundy

For fun, tried to implement, that's what happened

 .invisible { display: none; } .checker { margin-top: 150px; } .checker a { position: relative; display: block; height: 25px; transition: top 0.3s; top: 0px; } /* смещения, можно генерировать каким-нибудь scss */ .checker #p1:target ~ a { top: 0px; } .checker #p2:target ~ a { top: -25px; } .checker #p3:target ~ a { top: -50px; } .checker #p4:target ~ a { top: -75px; } .checker #p5:target ~ a { top: -100px; } .checker #p6:target ~ a { top: -125px; } .checker #p7:target ~ a { top: -150px; } 
 <nav class="checker"> <!-- элементы-приманки --> <div class="invisible" id="p1"></div> <div class="invisible" id="p2"></div> <div class="invisible" id="p3"></div> <div class="invisible" id="p4"></div> <div class="invisible" id="p5"></div> <div class="invisible" id="p6"></div> <div class="invisible" id="p7"></div> <!-- узлы меню --> <a href="#p1">Пункт 1</a> <a href="#p2">Пункт 2</a> <a href="#p3">Пункт 3</a> <a href="#p4">Пункт 4</a> <a href="#p5">Пункт 5</a> <a href="#p6">Пункт 6</a> <a href="#p7">Пункт 7</a> </nav>

The basic idea: to make a target any element (out of seven similar ones) and select a selector somehow so that the styles apply to all menu items.
Theoretically, an example can even be improved by moving the "bait" to a higher level so that semantics does not suffer much.

    Or you can use when hovering such a method sss 3 as hover. The result will be something like this

     menu_label{ display: block; position:relative; left: 0%; font-size: 14px; opacity: 0.6; } menu_label:hover{ opacity:1; font-size: 20px; }

    I think you can finish it, but now there is no way to test this code.

     <menu_label>menu 1</menu_label> <menu_label>menu 2</menu_label> <menu_label>menu 3</menu_label>