自定义div菜单从左侧滑动

时间：2014-09-10 22:07:01

标签： javascript jquery html css slide

我需要帮助为我的tumblr安装一个滑动菜单，它从画布上加载，从左侧进入并在点击按钮后覆盖我的容器，一旦点击/点击菜单项就消失，或者点击菜单外的任何地方。我尝试在移动用户的布局方面制作这个网站，这个菜单也应该有助于为智能手机和平板电脑上的#right div释放更多空间，因此它总能达到100％。我已经尝试了几个jquery滑块和菜单教程，但似乎我在代码中已经超出了我的想法。如果你们中的一个善良的人可以帮助我，我可以通过设计徽标来回报你！？ 

    <html lang="en">
  <head>


<script type="text/javascript">
  WebFontConfig = {
    google: {
      families: [ 'Allan:700:latin' ] 
    }
  }
    ;
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  }
  )();

</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

<script type="text/javascript" src="http://static.tumblr.com/thpaaos/sZQkv2j7g/infinitescroll.js">
</script>

<script type="text/javascript">
  var jQis = jQuery.noConflict();
  jQis(function($) {
    $('ul.allposts').infinitescroll({
      debug: false,
      nextSelector: "a.next",
      text: "",
      donetext: "{lang:No more posts} .",
      navSelector: "div#footer",
      contentSelector: "div#right",
      itemSelector: "div#right > .post"
    }
                                   )
}
    );
 </script>
 {/block:IndexPage} {/block:IfEndlessScrolling}
 <script type="text/javascript">
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-36426806-1']);
   _gaq.push(['_trackPageview']);
   (function() {
     var ga = document.createElement('script');
     ga.type = 'text/javascript';
     ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(ga, s);
   }
   )();
 </script>
  </head>
  <body>
<div id="container">
  <div id="left">





    <div class="space">
    </div>
    <a href="http://fkorp.tumblr.com/tagged/portrait">
      Portraits
    </a>

    <div class="space big">
    </div>
    <a href="http://fkorp.tumblr.com/tagged/projects">
      Projects
    </a>

    <div class="space big">
    </div>
    <a href="http://fkorp.tumblr.com/tagged/series">
      Series
    </a>

    <div class="space big">
    </div>
    <a href="http://fkorp.tumblr.com/tagged/film">
      Films
    </a>

    <div class="space big">
    </div>
    <a href="http://instagram.com/florestankorp" target="_blank">
      Instagram
    </a>

    <div class="space big">
    </div>
    {block:Pages}
    <a href="{URL}">
      {Label}
    </a>
    <br>
    {/block:Pages}

    <div class="space">
    </div>
    <a href="http://fkorp.tumblr.com/aboutme">
      About me
    </a>
  </div>

  <div id="right">
    {block:Posts}

    <div class="post">
      {block:Text} {block:Title}
      <a class="h3" href="{Permalink}">
        {Title}
      </a>
      {/block:Title} {Body} {/block:Text} {block:Link} 
      <a class="h3 link" href="{URL}">
        {Name}
      </a>

      <p>
        {block:Description}{Description}{/block:Description}
      </p>
      {block:Link} {block:Photo} 
      <img alt="{Permalink}" src="{PhotoURL-500}">

      <p>
        {block:Caption}{Caption}{/block:Caption}
      </p>
      {/block:Photo} {block:Quote}

      <h3>
        &#8220;{Quote}&#8221;
      </h3>

      <p>
        {block:Source}&mdash; {Source}{/block:Source}
      </p>
      {/block:Quote} {block:Chat} {block:Title}
      <a class="h3" href="#">
        {Title}
      </a>
      {/block:Title} {block:Lines} {block:Label} {block:Label} {/block:Lines}

      <table>
        <tr>
          <td class="name">
            {Label}
          </td>

          <td class="words">
            {Line}
          </td>
        </tr>
      </table>
      {/block:Chat} {block:Audio} {block:AudioEmbed} {AudioEmbed-500} {/block:AudioEmbed}               {block:AudioPlayer} {AudioPlayerBlack} {/block:AudioPlayer} {block:Caption}{Caption}{/block:Caption} {/block:Audio} {block:Video} {Video-500} {block:Caption}{Caption}{/block:Caption} {/block:Video}
    </div>
    {block:IfShowPostNotes}{PostNotes}{/block:IfShowPostNotes} {/block:Posts}

    <div id="footer">
      {block:Pagination} {block:PreviousPage} 
      <a href="{PreviousPage}">
        {lang:Previous}
      </a>
      {/block:PreviousPage} {block:JumpPagination length="10"} {block:CurrentPage} 
      <span class="current_page">
        {PageNumber}
      </span>
      {/block:CurrentPage} {block:JumpPage} 
      <a class="jump_page" href="{URL}">
        {PageNumber}
      </a>
      {/block:JumpPage} {/block:JumpPagination} {block:NextPage} 
      <a class="next" href="{NextPage}">
        {lang:Next}
      </a>
      {/block:NextPage} {/block:Pagination} {block:PermalinkPagination} {block:NextPost} 
      <a href="{NextPost}">
        {lang:Back}
      </a>
      {/block:NextPost} &nbsp; &bull; &nbsp; {block:PreviousPost} 
      <a href="{PreviousPost}">
        {lang:Next}
      </a>
      {/block:PreviousPost} {/block:PermalinkPagination}
    </div>
  </div>

  <div class="clear">
  </div>
</div>
{/block:IfDisqusShortname}
  </body>

  <style type="text/css"> 

body {
  margin:0;
  padding:20px;
  background:#FF0;
  font-family:Georgia;
  text-shadow:rgba(0,0,0,.01) 0 0 1px;
  font-size:1em;
  letter-spacing:.065em;
  color:#111;
  overflow:scroll;
  overflow-x:hidden
}

#tbl-container {
  overflow:auto
}

{
  cwidth:600px;
  scrollbar-base-color:#ffeaff
}

a {
  color:#111;
  text-decoration:none
}

a:hover {
  color:#FFF;
  background:#D00000
}

a:active,a:focus {
  outline:0
}

a img {
  border-width:0
}

a img {
  border-width:0
}

.clear {
  clear:both
}

#container {
  width:770px
}

#left {
  position:fixed;
  float:left;
  width:200px
}

#left a.h2 {
  font-family:'Allan',serif;
  font-size:2.8em;
  line-height:1em;
  text-decoration:none
}

#left a.h2:hover {
  color:#111;
  background:none;
  text-decoration:none
}

#left .space {
  width:100%;
  height:20px
}

#left .space.small {
  width:100%;
  height:10px
}

#right {
  width:500px;
  float:right;
  margin-left:20px
}

#right .post {
  margin:0 0 50px
}

img {
  max-width:100%;
  box-shadow:5px 5px 5px #888
}

img.noborder {
  border:0;
  box-shadow:0 0 0 rgba(0,0,0,0);
  border-radius:0 0 0 0;
  background:none
}

#right .post h3 {
  font-weight:400;
  font-size:1.75em;
  margin:0
}

#right .post a.h3 {
  color:#111;
  text-decoration:none;
  font-size:.75em;
  margin:0
}

#right .post a.h3:hover {
  background:none
}

#right .post a.h3.link {
  text-decoration:underline
}

#right .post a.h3.link:hover {
  color:#FFF;
  background:#D00000
}

#right .post blockquote {
  border-left:2px solid #111;
  padding:0 0 0 15px;
  margin-left:0
}

ol.notes {
  margin:0 0 50px;
  padding:0
}

ol.notes img {
  display:none
}

#right #footer {
  position:relative;
  right:0;
  text-align:right
}

#right #footer .credit {
  color:#9C9C9C;
  margin:50px 0 0
}

#right #footer .credit a {
  color:#9C9C9C
}

#right #footer .credit a:hover {
  color:#111;
  background:none
}


  </style>

    </html>

0 个答案:

没有答案
相关问题
最新问题