siliding image css and html only -


i want pic slide left , top side , and not straight foward, using css , html without javascript.

and there simple code take make "dropdown" li go down , push rest of categories?

thanks fot helping guys !

nav{      background-color: #fff;      width:150px;      height: 667px;      float:right;  }    nav h1{      padding: 20px;      color: #777;      font: 20px tahoma,times,serif;    }  ul {   position: relative;   margin: 0;   padding: 0;   list-style: none;   width: 150px;   text-align: right;   }  ul li {   position: relative;   }  li ul {   position: absolute;   right: 149px;   top: 0;   display: none;   }  ul li {   display: block;   text-decoration: none;   color: #777;   background: #fff;   padding: 5px;     border-bottom: 0;   }  ul {   margin: 0;   padding: 0;   list-style: none;   width: 150px;     }  li:hover ul {       display: block;  }    * {      margin: 0;      padding: 0;  }  body {      background: #333;      background: url("images/3.jpg");      background-repeat: no-repeat;  }    .container{      overflow: hidden;      margin-right: 0;      height: 500px;       -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);      box-shadow: 10px 10px 10px rgba(0,0,0,0.3);      width: 800px;  }  .container img{      margin-top: 0px auto;      position: absolute;      top: 0px;      left: 0px;      z-index: -60;  }  .container li img {      margin-top: 0px auto;      position: absolute;      left: 600px auto;      z-index: -50;      -webkit-transition: 1s ease;      -moz-transition: 1s ease;      -o-transition: 1s ease;      -ms-transition: 1s ease;      transition: 1s ease;     }    li:nth-child(1){      padding-top: 0px;  }    li a:hover {      background: #eee;  }    li a:hover + img {      position: absolute;      margin-top: 0px auto;      left: -667px;  }
<!doctype html>    <html lang="en">      <head>          <meta charset="utf-8" />          <link rel=stylesheet type="text/css" href="stylesheet.css"/>          <title></title>      </head>      <body>          <div class="container">          <nav><h1><b>text</b></h1>    <ul>    <li><a href="#">text</a><img src="http://media3.fcbarcelona.com/media/asset_publics/resources/000/160/456/size_640x360/pic_2015-01-11_barcelona-atletico_45.v1431011244.jpg" alt="1"></li>     <li><a href="#">text</a><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gctd6ngnngapdlhqds4kbuonncaaump4svu-e_9rxmh_wldtppse" alt="1">        <ul>         <li><a href="#">text</a></li>         <li><a href="#">text</a></li>         <li><a href="#">text</a></li>         </ul>              </li>     <li><a href="#">text</a><img src="http://static3.demotix.com/sites/default/files/imagecache/a_scale_large/2000-5/photos/1368393557-club-atletico-de-madrid-v-fc-barcelona--la-liga_2046465.jpg" alt="1">         <ul>         <li><a href="#">text</a></li>         <li><a href="#">text</a></li>         <li><a href="#">text</a></li>         <li><a href="#">text</a></li>          </ul>       </li>    <li><a href="#">text</a><img src="http://barcelonacamps.com/wp-content/uploads/2014/04/barca-new-team.jpg" alt="1">         <ul>         <li><a href="#">text</a></li>         <li><a href="#">text</a></li>         <li><a href="#">text</a></li>         <li><a href="#">text</a></li>         </ul>         </ul>      </li>               </nav>          </div>       </body>  </html>

the website

not sure understand you're trying achieve, check out codepen: image slider

if want them slide top left set top attribute , adjust how high:

li a:hover + img {     position: absolute;     margin-top: 0px auto;     left: -667px;     top: -100px; }

can explain and there simple code take make "dropdown" li go down , push rest of categories? more though.


Comments

Post a Comment

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

Image
i have page in each contest shown in row. each row contains contest id , link other model names have foreign key contest. news model: class news(models.model): title = models.charfield(max_length=50, null=true) description = models.textfield() time = models.timefield( default= datetime.datetime.now().time()) contest = models.foreignkey(contest) i want use admin adding , changing these models. want when user clicks on 'news' has foreign key contest id=1, shows list of news value foreign key. use {% instance in instances %} <tr class="{% cycle 'row1' 'row2' %}"> <td>{{ instance.title }}</td> <td>{{ instance.starttime }}</td> <td>{{ instance.timespan }}</td> <td>{{ instance.date }}</td> <td><a href="/adm...
Read more

css - Make div keyboard-scrollable in jQuery Mobile? -

from can tell, although jquery-mobile-powered pages can contain divs overflow set scroll or auto, , these divs can scrolled one-screen bar or mouse wheel, cannot scrolled using arrow keys, page-up/page-down, or home/end. instead, official "page" div (with data-role="page") absorbs input. perhaps other divs can't acquire focus, i'm not sure. is there way around this? edit: jsfiddle of simple example: https://jsfiddle.net/qogz0shx/ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"> </script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/> <style> #outer { overflow:scroll; height: 50vh; width: 50vw; } #inner { height: 500vh; width: 500vw; } ...
Read more

android - Keyboard hides my half of edit-text and button below it even in scroll view -

i having trouble keyboard covers edit-text , half of button in scroll view. here's layout , please tell me how should resolve problem. many questions on topic none of them s working me. <?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@drawable/bg" android:layout_height="match_parent"> <scrollview android:layout_width="match_parent" android:fillviewport="true" android:layout_height="match_parent"> <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <linearlayout android:layout_width="match_parent" android:layout_height="w...
Read more