Home/ Questions/Q 8488739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T21:37:47+00:00

I am trying to make two tabs that are centered at the bottom and

  • 0

I am trying to make two tabs that are centered at the bottom and when clicked the whole thing rises and shows the content – like they do at http://www.hunterandsand.com but I can’t seem to work out how they did it with the code they have. Also how they got it to be transparant. Any help would be extremely useful, thank you.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Beauchamp&#39;s Corporate offers a unique service for clients wishing to design a special product for their business.">
<title>Beauchamp&#39;s Corporate</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#maximage').cycle({
        fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed: 1000,
        timeout: 7000,
        prev: '#arrow_left',
        next: '#arrow_right'
    });
</script>
</script>
<body>

        <div id="logo"><img src="images/logo1.jpg" alt="Beauchamp's Corporate"></div>

        <div id="cycle-loader">
         </div>   

        <div id="maximage">
            <img src="images/boat1.jpg" alt="" />
            <img src="images/car1.jpg" alt="" />
            <img src="images/dock1.jpg" alt="" />
            <img src="images/glass1.jpg" alt="" />
            <img src="images/hotel1.jpg" alt="" />   
            <img src="images/table1.jpg" alt="" />         
        </div>

        <a href="" id="arrow_left" class="button" title="Previous Photo"></a>

        <a href="" id="arrow_right" class="button" title="Next Photo"></a> 
 <div id="pages">

            <div id="nav">

                <ul id="menu">
                    <li id="services">Our Product</li>
                    <li id="contact">Contact Us</li>
                </ul>

            </div>

            <div id="content">

                <div id="copy">

                    <div class="page product">

                        <p>We offer a consultation meeting in which we discuss client requirements, design ideas, packaging options, budgets, lead times and more...
                            <br />
                        We have a number of designs already in production which we can edit & brand with the client logo or...
                            <br />
                        Following this initial meeting, we produce product drawings, quotes, source leather samples and materials specific to this product. Samples can be produced once drawings have been approved by the client.
                            <br />
                        Lead times, delivery schedules and product prices are unique to the client and indervidually calculated according to the specific client reqirements.
                            <br />
                        Where possible Beauchamp&#39;s aims to produce products in one of our UK factories however should it be required we will use factories further afield. </p>

                    </div>

                    <div class="page contact">


                        <p>For further information:
                            <br />
                        Email: <a href="info@beauchampsoflondon.com">info@beauchampsoflondon.com</a>
                            <br />
                        Address: 35 Bruton Street, London, W1J 6QY 
                            <br />
                        Website: <a href="www.beauchampscorporate.com">www.beauchampscorporate.com</a>
                            <br />
                        Fashion Accessories Website: <a href="www.beauchampsoflondon.com">www.beauchampsoflondon.com</a></p>

                    </div>

                </div>

            </div>


        </div>      

</body>
</html>

Css:

#logo{
width:180px;
height:113px;
margin-left:auto;
margin-right:auto;
margin-top:-10px;
}

a.button {
    display:block;
    width:50px;
    height:50px;
    margin-top:200px;
    opacity: 0.6%;
    }

a#arrow_left{
    float:left;
    background: transparent url('../images/arrowleft1.jpg') no-repeat;
    position: relative;
    z-index: 100;
}

a#arrow_right{
    float:right;
    background: transparent url('../images/arrowright1.jpg') no-repeat;
    position: relative;
    z-index: 100;
}

#maximage { 
height: 100%; 
width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000; 
 }
#maximage img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000; 
}
li {
list-style:none;
}

To see it running – http://www.musidoraland.co.uk

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all your site needs a lot of attention. Having readable text is a MUST before you do anything else…

    That said you can mimic their transparency by using:

    #[Tab_Container] {background:transparent url([Image_Dir]/[Transparent_Image.EXT]) repeat;}

    To make the tabs slide up that way you should use jQuery’s sliding animations, like http://www.bennadel.com/blog/1827-Using-jQuery-s-SlideUp-and-SlideDown-Methods-With-Bottom-Positioned-Elements.htm

    This appears to be how your example site is doing this:

    $(function() {
    $('.page').hide();
    $('#menu li').click(
        function() {

            var content_id = $(this).attr('id');

            $('#menu li').addClass('off');
            $(this).removeClass('off');

            if ($('.page').is(':visible')) 
            {
                $('.page').hide();
                $('.'+content_id).show();
            }
            else
            {
                $('#pages').animate({ height: '300px', easing: 'easeInOutQuart' });

                    //console.log($(this).attr('id'));
                $('.'+content_id).show();
            }



        });
});

    To be honest it looks like you should consult a pro, but if you really want to learn and do it yourself practice with the animations in different browsers until you get what you are looking for!

    • 0