Many times I saw a similar menu on the network, of course I did this myself, but:

  1. How to remove the name ID from the address bar
  2. How to make the transition to anchors on hover
  3. How to align other blocks like the первый

Sandbox example: codepen

 *{ margin:0; padding:0; list-style:none; text-decoration:none; } menu{ height:50px; background:#fff; line-height:47px; } ul li{ display:inline-block; padding:.1em 1em; background:#fff; position:relative; outline:1px solid #eee; } ul>li>a{ color:blue; } .l:after{ content:""; border:5px solid transparent; border-top:5px solid blue; position:absolute; right:2px; top:48%; } .l .menu{ position:absolute; top:51px; left:0; width:600px; height:300px; background:#fff; border:10px solid #fff; outline:1px solid #eee; display:none; } .l:hover .menu{ display:block; } .tab{ overflow:hidden; width:100%; height:100%; background:#fff; } .paginator,.content{ float:left; height:100%; } .paginator{ width:30%; background:#fff; } .content{ width:70%; background:#fff; position:relative; } .view{ width:95%; height:95%; outline:1px solid #eee; margin:1px 2%; overflow:hidden; } .paginator p{ border:1px solid #eee; margin:0 0 3px 0; padding-left:4px; } .paginator p:focus, .paginator p:hover{ background:#eee; } .paginator pa{ display:block; width:100%; height:100%; color:blue; } .view div{ width:90%; height:90%; margin:10px auto 30px; } .p1{ background:#ccc; } .p2{ background:#000; } .p3{ background:#cc0000; } .p4{ background:#30dd30; } 
 <menu> <ul> <li><a href="">Главная</a></li> <li><a href="">Гостевая</a></li> <li class="l"><a href="">Примеры</a> <div class="menu"> <div class="tab"> <div class="paginator"> <p><a href="#d">Изображения</a></p> <p><a href="#c">Смайлы</a></p> <p><a href="#b">Книги</a></p> <p><a href="#a">Кино</a></p> </div> <div class="content"> <div class="view"> <div id="d"class="p1"></div> <div id="c" class="p2"></div> <div id="b" class="p3"></div> <div id="a" class="p4"></div> </div> </div> </div> </div> </li> <li><a href="">О нас</a></li> </ul> </menu>

I naturally understand that the transitions to the anchor are not really id="?" do hover on css but hover not sure how I do it on js , please explain how this is done and especially about the first item and the second ?

  • the third point is decided by yourself - user33274
  • loftblog.ru/material/… here is an example of such a menu - user33274

1 answer 1

Why do you need anchors in principle? You need the li: hover + div selector to work. And in the div already post what you want. Here is an example:

 li { padding: 1em 2em; border: 1px solid #ddd; display: inline-block; background-color: #fff; } ul li ul li { display: none; } ul li:hover ul li { display: inline-block; } #withsub { position: relative; } #withsub ul { position: absolute; } #withsub li { position: relative; } #withsub li + div { position: absolute; left: 100%; top: 0; } li:hover + div { width: 400px; height: 300px; border: 1px solid #ddd; } 
 <ul> <li>item#1</li> <li>item#2</li> <li id="withsub">item#3 &or; <ul> <li>subitem#1</li> <div style="background-color: #d00;"></div> <li>subitem#2</li> <div style="background-color: #0d0;"></div> <li>subitem#3</li> <div style="background-color: #00d;"></div> <li>subitem#4</li> <div style="background-color: #dd0;"></div> </ul> </li> <li>item#4</li> </ul>