Let's create a simple pulldown drawer with Javascript, html and some CSS love. We can use this with a HTML block and/or with PHP for custom links, messages, news and everything else that comes to mind. It's up to you on how you want to use it.

Demo

If you already have the latest jQuery dependency, no need to add it to your index.template.php

If you dont have it, find:

Code Select Expand


// Here comes the JavaScript bits!
echo '


...and add after:

Code Select Expand


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


The CSS:

Code Select Expand


[class*="item-"] {
    display: inline-block;
    vertical-align: top;
    margin-left: -4px;
    transform: translate(4px,0);
    /* IE */
    *display: inline;
    *zoom: 1;
}
.item-1 {
    width: 100%;
}
@media screen and (max-width: 650px) {
    [class*="item-"] {
        display: block;
        width: 100%;
        margin: 0;
        transform: none;
    };
}
.container {
    margin: 0 auto;
    background: #fff;
    max-width: 1000px;
    margin-top: -12px;
}
.inner-wrap {
  width: 80%;
  margin: 0 auto;
}
.toggle-content {
  display: none;
  padding: 20px 20px 40px 20px;
  background: #555555;
  color: #ccc;
  font-style: italic;
  font-size: 18px;
  width: 100%;
  border-bottom: 10px solid #424242;
}
.toggle-content > p {
  margin-bottom: 20px;
}
.toggle-content > p {
  margin-bottom: 10px;
}
.vert-flag {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e72929), color-stop(100%, #6b0c0c));
    background-image: -webkit-linear-gradient(#e72929, #6b0c0c);
    background-image: -moz-linear-gradient(#e72929, #6b0c0c);
    background-image: -o-linear-gradient(#e72929, #6b0c0c);
    background-image: -ms-linear-gradient(#e72929, #6b0c0c);
    background-image: linear-gradient(#e72929, #6b0c0c);
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 50px;
    position: relative;
    padding-bottom: 50px;
    top: 0;
    padding-top: 10px;
    left: 50%;
    color: #fff;
    cursor: pointer;
}
.vert-flag:before {
    content: " ";
    display: block;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 25px;
    border-color: transparent;
    left: 0;
    bottom: 0;
    position: absolute;
    border-bottom-color: #ffffff;
}


The Markup:

Code Select Expand


<div class="container">
  <div class="inner-wrap">
    <div class="item-1">
      <div class="toggle">
        <div class="toggle-content" class="item-1">
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
        </div>
       <span class="vert-flag">PULL</span>
    </div>
  </div>
</div>
</div>


The JS:

Code Select Expand


<script type="text/javascript">
             $(".vert-flag").click(function(){
             $(".toggle-content").slideToggle();
          });
</script>


Reference: CodePen - A Pen by David HC

Let's create a simple pulldown drawer with Javascript, html and some CSS love. We can use this with a HTML block and/or with PHP for custom links, messages, news and everything else that comes to mind. It's up to you on how you want to use it.

Demo

If you already have the latest jQuery dependency, no need to add it to your index.template.php

If you dont have it, find:

Code Select Expand


// Here comes the JavaScript bits!
echo '


...and add after:

Code Select Expand


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


The CSS:

Code Select Expand


[class*="item-"] {
    display: inline-block;
    vertical-align: top;
    margin-left: -4px;
    transform: translate(4px,0);
    /* IE */
    *display: inline;
    *zoom: 1;
}
.item-1 {
    width: 100%;
}
@media screen and (max-width: 650px) {
    [class*="item-"] {
        display: block;
        width: 100%;
        margin: 0;
        transform: none;
    };
}
.container {
    margin: 0 auto;
    background: #fff;
    max-width: 1000px;
    margin-top: -12px;
}
.inner-wrap {
  width: 80%;
  margin: 0 auto;
}
.toggle-content {
  display: none;
  padding: 20px 20px 40px 20px;
  background: #555555;
  color: #ccc;
  font-style: italic;
  font-size: 18px;
  width: 100%;
  border-bottom: 10px solid #424242;
}
.toggle-content > p {
  margin-bottom: 20px;
}
.toggle-content > p {
  margin-bottom: 10px;
}
.vert-flag {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e72929), color-stop(100%, #6b0c0c));
    background-image: -webkit-linear-gradient(#e72929, #6b0c0c);
    background-image: -moz-linear-gradient(#e72929, #6b0c0c);
    background-image: -o-linear-gradient(#e72929, #6b0c0c);
    background-image: -ms-linear-gradient(#e72929, #6b0c0c);
    background-image: linear-gradient(#e72929, #6b0c0c);
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 50px;
    position: relative;
    padding-bottom: 50px;
    top: 0;
    padding-top: 10px;
    left: 50%;
    color: #fff;
    cursor: pointer;
}
.vert-flag:before {
    content: " ";
    display: block;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 25px;
    border-color: transparent;
    left: 0;
    bottom: 0;
    position: absolute;
    border-bottom-color: #ffffff;
}


The Markup:

Code Select Expand


<div class="container">
  <div class="inner-wrap">
    <div class="item-1">
      <div class="toggle">
        <div class="toggle-content" class="item-1">
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
          <p>With a commitment to quality content for the SMF community, we craft premium themes for SimpleMachines.org and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
        </div>
       <span class="vert-flag">PULL</span>
    </div>
  </div>
</div>
</div>


The JS:

Code Select Expand


<script type="text/javascript">
             $(".vert-flag").click(function(){
             $(".toggle-content").slideToggle();
          });
</script>


Reference: CodePen - A Pen by David HC

Create a Custom Menu for SMF

Create Social Icons with a CSS Sprite

Create a simple carousel with jQuery

Create a Pretty scroller box

Create easy Progress Bars