Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.

Create a Pulldown Drawer

Mick in Tutorials on Sep 06, 2013

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.


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

If you dont have it, find:

	// Here comes the JavaScript bits!
echo '

...and add after:

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

The CSS:

[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:

<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:

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

Reference: CodePen - A Pen by David HC

Tagged with:


Mick

Mick G

idesignsmf.com

    

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.


0 Comments



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.


Get 100% complete access to our entire collection and find out why SMF owners prefer our themes





Latest Discussions

Join the conversation