CODEWITHSUNDEEP
jqueryhtmlcssmenu
Keane Kwa
Keane Kwa

Reputation: 9

Vertical Expanding Image Menu

I want to create this: http://tympanus.net/Tutorials/ExpandingImageMenu/

There is a tutorial for this demo but it only has horizontal expansion. How can I make vertical expansion?

Upvotes: 0

Views: 913

Answers (2)

Aratidgr8
Aratidgr8

Reputation: 431

Please find below code, it works exactly as per the reference given by you.

Kindly note : Please include jquery library (CDN) link from jquery.com in the head section of this code to make it work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Image Slider</title>

<script type="text/javascript">
    $(document).ready(function(){

        $("ul#hslider li").click(function(){ 

            $(".context").hide("slow");                     //By default all divs are hidden
            $(".curtain").show("slow");                     //Curtains are on

            if($(this).hasClass("active"))
            {   
                $(this).removeClass("active");              //Remove class active       
                $(this).find("span.curtain").show("slow");  //Add Black Curtain
                $(this).find("div.context").hide("slow");   //Hide div content
            }
            else
            {
                $("ul#hslider li").removeClass("active");   //Remove active from all li's
                $(this).addClass("active");                 //Add class active
                $(this).find("span.curtain").hide("slow");  //Remove curtain        
                $(this).find("div.context").show("slow");   //Display div content
            }

            return(false);

        });

    });
</script>   
<style type="text/css">
body                                    { font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0; }
ul#hslider li                           { cursor:pointer; display:inline-block; list-style:none; padding:0; position:relative;vertical-align:top; }
ul#hslider li a img                     { float:left; height:100px; width:100px; }
ul#hslider li span.curtain              {   background:#000; 
                                            display:block; 
                                            height:100px; 
                                            left:0; 
                                            opacity:0.4; 
                                            filter:alpha(opacity=40); /* For IE8 and earlier */ 
                                            top:0; 
                                            position:absolute; 
                                            width:100px;  
                                        }
ul#hslider li .context                  { border:1px dashed #aaa; display:none; float:left; padding:10px; width:260px;  }
ul#hslider li .context p                { background:#eee; padding:5px; text-align:justify; }
</style>

</head>

<body>

<ul id="hslider">

<li>
    <a href="#"><img src="images/mysteryman.jpg" alt="mystery-man" title="MM" /></a>
    <span class="curtain">&nbsp;</span>
    <div class="context">

            <h2>Some Heading - 1</h2>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>

            <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div>
</li>

<li>
    <a href="#"><img src="images/mysteryman.jpg" alt="mystery-man" title="MM" /></a>
    <span class="curtain">&nbsp;</span>
    <div class="context">

            <h2>Some Heading - 2</h2>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>

            <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div>
</li>

<li>
    <a href="#"><img src="images/mysteryman.jpg" alt="mystery-man" title="MM" /></a>
    <span class="curtain">&nbsp;</span>
    <div class="context">

            <h2>Some Heading - 3</h2>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>

            <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div>
</li>


</ul>

</body>
</html>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Are you looking for Vertical Sliding Accordion?

Vertical Sliding Accordion

The tutorial is here.

Upvotes: 1

Related Questions