I've been doing this kind of design, but how to make a transition to a hover anchor.



  • I've seen a lot of this menu online, of course I did, but...

    1. How to remove the name from the address line ID
    2. How to make a transition to anchors hover
    3. How to cut the other blocks as well. первый

    Example in sand: http://codepen.io/Geyan/pen/mELRKr?editors=110

    *{
      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 p a{
      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 there are no real crossings to anchor. id="?" to do so hovercss but I don't know how to do that. js, plug like this, especially first paragraph and Second ?



  • Why do you need an anchor in principle? You need a li:hover + div. In the div, put what you want. This 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2