Question

I am creating this website to test some JQuery things here and there. I managed to get along just well but now i'm having an issue that i can't even understand.

I have this menu, with 3 buttons. The buttons alternate between some sections of the page (Contact, projects, info) but when the page first load, some buttons doesn't work until you click the right one and even then they doesn't work properly. I tried to fix it but now the "Proyectos" button doesn't even work at all.

script.js

var main = function(){
    // Creating variables
    var $navButton = $('#nav-button'),      
        $navMenu = $('#nav-menu'),
        $navButtons = $('#nav-buttons'),
        $logo = $('#logo'),                 
        $contactPage = $('#contact-page'),  
        $infoPage = $('#info-page'),
        $projectPage = $('#project-page'),
        $butContact = $('#but-contacto'),
        $butInfo = $('#but-info'),
        $butProject = $('#but-projects'),
        transitioning = false,
        logoOnTop = false;

    //Setting the page up
    $projectPage.hide();
    $navButtons.hide();
    $contactPage.hide();
    $infoPage.hide();

    //Display-Hide menu
    $navButton.click(function(){
        var $this = $(this);
        $this.data('clicked', !$this.data('clicked'));

        if(!transitioning) {
           transitioning = true;
           if($navButton.data('clicked')) {
             $navMenu.animate({left: '0'}, 500, function(){
                 transitioning = false;
             });
             $navButtons.show('slide',400);
           } else {
             $navMenu.animate({left: '-134'}, 500, function(){
                 transitioning = false;
             });
             $navButtons.hide('slide',400);
           }
        }
    });

    //Display contact page
    $butContact.click(function(){
        if (!logoOnTop) {
            $logo.animate({top: '0px'},500);
            logoOnTop = true;
        }
        $infoPage.hide();
        $projectPage.hide();
        $contactPage.delay(400).fadeIn('slow').delay(400);
    });

    //Display info page
    $butInfo.click(function(){
        if (!logoOnTop) {
            $logo.animate({top: '0px'}, 500);
            logoOnTop = true;
        }
        $projectPage.hide();
        $contactPage.hide();
        $infoPage.delay(400).fadeIn('slow').delay(400);
    });

    //Display projects page
    $butProject.click(function(){
        if (!logoOnTop) {
            $logo.animate({top:'0px'}, 500);
            logoOnTop = true;
        }
        $infoPage.hide();
        $contactPage.hide();
        $projectPage.delay(400).fadeIn('slow').delay(400);
    });
}

$(document).ready(main);

main.css

html{
position:relative;
height:100%;
width:100%;
background-color: #6E6E6E; 
}

.nav-button{
    position:absolute;
    margin-top: -2px;
    margin-left: 7px;
    width: 32px;
    height: auto;
    z-index:1;
} 

.nav-menu{
    background-color:#424242;
    position:absolute;
    top:0px;
    left:-134px;
    width: 200px;
    height:100%;
}

.nav-buttons{
    position:absolute;
    top:225px;
    width:200px;
}

.nav-buttons h3{
    background-color:#333;
    height: 40px;
    text-align:center;
    padding-top:15px;
    color: #000;
    text-shadow: -1px 0px 0.2px #555, 1px 0px 0.2px #555, 0px 1px 0.2px #555, 0px -1px 0.2px #555;
}

.logo{
    position: relative;
    top:250px;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: 100%;
}

h3, h1, h5, h3{
    width:100%;
    text-align:center;
    font-family: Sansita One;
    color: #222;
    text-shadow: 0px 2px 3px #555;
}

.logo h1{
    margin-bottom: 3px;
}

.logo h3{
    margin-top: 2px;
}

.hover-rotate:hover {
  -ms-transform: rotate(-170deg);
  -webkit-transform: rotate(-170deg);
  -moz-transform: rotate(-170deg);
  -o-transform: rotate(-170deg);
  transform: rotate(-170deg);

}

.contact-page{
    position: relative;
    top:135px;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: 100%;
}

.info-page{
    position: relative;
    top:135px;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: 100%;
}

.project-page{
    position: relative;
    top:135px;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: 100%;
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sansita+One" />
        <link href="main.css" rel="stylesheet" type="text/css" />
        <link href="js/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type='text/javascript' src='js/jquery-2.1.4.min.js'></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script src="js/script.js" type="text/javascript"></script>
        <title>Manuel Pepe - Test</title>
    </head>
    <body>
        <div id="nav-bar" class="nav-bar">
            <div id="container">
                <img id="nav-button" class="nav-button" src="imgs/menu.png" />
                <div id="nav-menu" class="nav-menu">
                    <div id="nav-buttons" class="nav-buttons">
                        <div id="but-info" class="but-info"><h3>Informacion</h3></div>
                        <div id="but-projects" class="but-project                       s"><h3>Proyectos</h3></div>
                        <div id="but-contacto" class="but-contacto"><h3>Contacto</h3></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="logo" class="logo">
                <h1>Manuel Pepe</h1>
                <h3>Test</h3>
                <h5>¡¡¡ALPHA!!!</h4>
        </div>
        <div id="contact-page" class="contact-page">
            <h1>Hablame!</h1>
            <h3>WIP!</h3>
        </div>
        <div id="info-page" class="info-page">
            <h1>Quien soy?</h1>
            <h3>WIP!</h3>
        </div>
        <div id="project-page" class="project-page">
            <h1>Algunos proyectos:</h1>
            <h3>WIP!</h3>
        </div>
    </body>
</html>

Answer 1

The problem is that the "nav-menu" div is back, "covered" by the "*-page" div and then it remains no clickable.

You have to put "z-index: 1" in the "nav-menu" class to put the relative div above the page layer. Consequently the z-index property of "nav-button" div should became greater than 1. Here the new css.

html {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #6E6E6E;
}

.nav-container {
    z-index: 1;
}

.nav-button {
    position: absolute;
    margin-top: -2px;
    margin-left: 7px;
    width: 32px;
    height: auto;
    z-index: 2;
}

.nav-menu {
    background-color: #424242;
    position: absolute;
    top: 0px;
    left: -134px;
    width: 200px;
    height: 100%;
    z-index: 1;
}

.nav-buttons {
    position: absolute;
    top: 225px;
    width: 200px;
}

.nav-buttons h3 {
    background-color: #333;
    height: 40px;
    text-align: center;
    padding-top: 15px;
    color: #000;
    text-shadow: -1px 0px 0.2px #555, 1px 0px 0.2px #555, 0px 1px 0.2px #555, 0px -1px 0.2px #555;
}

.logo {
    position: relative;
    top: 250px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}

h3,
h1,
h5,
h3 {
    width: 100%;
    text-align: center;
    font-family: Sansita One;
    color: #222;
    text-shadow: 0px 2px 3px #555;
}

.logo h1 {
    margin-bottom: 3px;
}

.logo h3 {
    margin-top: 2px;
}

.hover-rotate:hover {
    -ms-transform: rotate(-170deg);
    -webkit-transform: rotate(-170deg);
    -moz-transform: rotate(-170deg);
    -o-transform: rotate(-170deg);
    transform: rotate(-170deg);
}

.contact-page {
    position: relative;
    top: 135px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}

.info-page {
    position: relative;
    top: 135px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}

.project-page {
    position: relative;
    top: 135px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}

Buttons doesn't work like they should

1 个答案:

Buttons doesn&#39;t work like they should

1 个答案:

Buttons doesn't work like they should