2

我试图重现这一点，但它不起作用： http ://www.templatemonster.com/demo/44543.html

这是我的结果：http ://webs-it.com/callstar/

我想要的是像我发布的示例一样浏览菜单。我对javascript有点陌生，但我没能让它工作。

这是我的代码：

<html>
<head>
    <link rel="stylesheet" href="css/style.css"  type="text/css" >
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style>
        #block1 {
            float:left;
            width:1058px;
            height:0px;
            margin-left:-1058px;
            margin-top:100px;
            background-color:#fff;
            position:relative;
        }

        #block2 {
            width:1058px;
            height:0px;
            margin-left:-1058px;
            margin-top:100px;
            background-color:#fff;
            position:relative;
        }

        #logo {
            margin:0 auto;
            width:502px;
            height:259px;
            margin-top:144px;
        }
        </style>
</head>
<body>   
<div id="continut">
    <div id="header">
        <div id="social">
            <a href="" onMouseOver="document.facebook.src='images/social/facebook_roll.png'" onMouseOut="document.facebook.src='images/social/facebook.png'"><img src="images/social/facebook.png" name="facebook"  alt="."></a>&nbsp;<a href="" onMouseOver="document.ytube.src='images/social/ytube_roll.png'" onMouseOut="document.ytube.src='images/social/ytube.png'"><img src="images/social/ytube.png" name="ytube" alt="."></a>&nbsp;<a href="" onMouseOver="document.en.src='images/social/en_roll.png'" onMouseOut="document.en.src='images/social/en.png'"><img src="images/social/en.png" name="en" alt="."></a>&nbsp;<a href="" onMouseOver="document.cz.src='images/social/cz_roll.png'" onMouseOut="document.cz.src='images/social/cz.png'"><img src="images/social/cz.png" name="cz" alt="."></a>
        </div>
    </div>

    <div id="block1">test test</div>
    <div id="block2">test test</div>

    <div id="logo" >
        <img src="images/logo/logo_homepg.png">
    </div>

    <div id="meniu">
        <a href="#" onMouseOver="document.about.src='images/meniu/about_roll.png'" onMouseOut="document.about.src='images/meniu/about.png'"><img src="images/meniu/about.png"  id="go1" name="about" alt="."></a><a href="#" onMouseOver="document.foto.src='images/meniu/photo_roll.png'" onMouseOut="document.foto.src='images/meniu/photo.png'"><img src="images/meniu/photo.png" name="foto" id="go2" alt="."></a><a href="#" onMouseOver="document.video.src='images/meniu/video_roll.png'" onMouseOut="document.video.src='images/meniu/video.png'"><img src="images/meniu/video.png" id="go3" name="video" alt="."></a><a href="#" onMouseOver="document.ref.src='images/meniu/ref_roll.png'" onMouseOut="document.ref.src='images/meniu/ref.png'"><img src="images/meniu/ref.png" name="ref" id="go4" alt="."></a><a href="#" onMouseOver="document.contact.src='images/meniu/contact_roll.png'" onMouseOut="document.contact.src='images/meniu/contact.png'"><img src="images/meniu/contact.png" name="contact" id="go5" alt="."></a>
    </div>
</div>

<div id="footer"></div>

<script>
    $( "#go1" ).click(function(){
        $( "#block1" ).animate({ height: "300px" }, 1 )
        .animate( { margin: "100px 0px" }, { queue: false, duration: 700 });
    });
    $( "#go2" ).click(function(){
        $( "#block2" ).animate({ height: "300px" }, 1 )
        .animate( { margin: "100px 0px" }, { queue: false, duration: 700 });

        $( "#block1" ).animate({ height: "300px" }, 1 )
        .animate({ margin: "100px 1558px" }, { queue: false, duration: 700 });
    });
</script>
</body>
4

1 回答 1

4

那是一个有趣的挑战。

我在这里为您创建了类似的效果。

查看jsFiddle 演示

PS：所有，HTML、CSS 和 Javascript 都是新的。

HTML

<div id="container">
    <div id="content">
        <div id="one"><p>One</p></div>
        <div id="two"><p>Two</p></div>
        <div id="three"><p>Three</p></div>
        <div id="four"><p>Four</p></div>
    </div> 

    <ul id="nav">
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
    </ul>

</div>

CSS

*{margin:0; padding:0; font-family: Helvetica}
#container{
    width:100%;
    height:600px;
    overflow:hidden;
    float:left;
    background: url(http://webs-it.com/callstar/images/covers/electric_guitar2.jpg) center no-repeat;
}

p {
    font-size:25px;
    text-transform:uppercase;
    text-align:center;
    font-weight:bold;
    color:#666;
    margin-top:22%;
}

#content {
   width:100%;
   height:200px;
   margin: 50px auto 0;
   position:relative;
   overflow:hidden;
}
#content > div {
    display:block;
    width:400px;
   height:200px;    
    background:white;
    position:absolute;
    margin-left:100%;
    /*left:-200px;*/
    opacity: 0;,
    top:40px
}

#nav {
    list-style:none;
    display:table;
    margin:0 auto;
    position:relative;
}
#nav li {
    display:table-cell;
    align:cen
    display:inline-block;
    padding:20px
}

#nav a {color:#fff; text-decoration:none;}

JS

$(function() {
    var content = $('#content'),
        contentHeight = content.height(),
        nav = $('#nav'),
        count = 0;

    // on load content height is shorter
    content.height(100);

    nav.find('a').on('click', function() {

        var $this = $(this),
            parent =  $this.parent(),
            targetElement = $this.attr('href');

        //Does the slide down animation once        
        if (count === 0) {
            content.animate({'height': contentHeight }, function() {
                parent.addClass('active');
                //animate in
                $(targetElement).animate({
                    left: '-=200px',
                    'margin-left': '50%',
                    opacity: 1
                }, 500);
            });
            count = 1;
        } else {

            //only add active class if parent does not have it and then animate it
            if ( !parent.hasClass('active') ) {

                parent.addClass('active');

                //animate in
                $(targetElement).animate({
                    left: '-=200px',
                    'margin-left': '50%',
                    opacity: 1
                }, 500);

                //Gets older clicked element
                var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');

                //only if old click element exists the do the animation
                if (oldClickedElement) {
                    //animate out + reset to start
                    $(oldClickedElement).animate({
                        left: 0,
                        'margin-left': '-50%',
                         opacity: 0
                    }, 500, function() {
                         $(oldClickedElement).css({
                            'margin-left' : '100%',
                            left: 0
                        });
                    });            
                }
            }        


        }



        return false;
    });

});

如果您有任何问题，请告诉我。

于 2013-07-25T15:51:56.120 回答