button keeps nudging when toggled with jquery

Question

i have the following code but when i click the menu button, all other menu itwms disappear as wanted, but the menu button nudges a bit to the right. also if i try to add a duration to the toggle, "over mij" becomes two lines. can anyone give me help me? -Max

<!DOCTYPE html>
<html>
<head>
    <title> Homepagina </title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<body>

    <!-- dit zijun de elementen van de menubalk: -->
    <div class="menuBar">
        <ul>
            <li> <a href="#" id="button"> Over mij </a> </li>
            <li> <a href="#" id="button"> Hobbies </a> </li>
            <li> <a href="#" id="menuButton"> MENU </a> </li>
            <li> <a href="#" id="button"> Muziek </a> </li>
            <li> <a href="#" id="button"> Informatica </a> </li>
        </ul>
    </div>

    <!-- dit is de inhoud van de pagina: -->
    <div class="jumbotron">
        <div class="container">

            hoi

        </div>
    </div>

    <!-- dit is voor de menubalk acties: -->
    <script>
        $(document).ready(function(){
            $("#menuButton").click(function(){
                $("[id=button]").toggle();
            });
        });
    </script>

</body>
</html>

body {
    background-image: url(background.jpg); 
    margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
    text-align: center;
}

.menuBar {
    width: 100%;
}

.menuBar {
    padding-left: 0px;
}

.menuBar ul li {
    display: inline-block;
    width: auto;
    padding-right: 50px;
    padding-left: 50px;
    line-height: 70px;
}

.menuBar ul li a {
    color: white;
    width: 75px;
    text-decoration: none;
    line-height: 70px;
    font-family: 'Raleway', sans-serif;
    font-size: 36px;
}

.menuBar a:hover {
    border-bottom: 1px solid white;
}

#menuButton {
    font-size: 46px;
    position: relative;
}

.jumbotron .container {
    height: 650px;
    width: 60%;
    position: fixed;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-top: 4.5px double white;
    border-bottom: 4.5px double white;
}

Answer 1

OK--you need to change id="button" to something different, because IDs need to be unique. If you are just needing something to act as a selector, you can use a class in this instance.

Here are the changes to the HTML:

<li> <a href="#" class="myButton"> Over mij </a> </li>
<li> <a href="#" class="myButton"> Hobbies </a> </li>
<li> <a href="#" id="menuButton"> MENU </a> </li>
<li> <a href="#" class="myButton"> Muziek </a> </li>
<li> <a href="#" class="myButton"> Informatica </a> </li>

Next, add a toggle to the document ready to hide the menu items when the page loads, and add the animation time parameter:

<script>
    $(document).ready(function(){
        //toggle myButton to hide them after the page loads.
        // If they are hidden before the page loads, the positions 
        // change a bit when they are toggled and that is what
        // is causing the main Menu button to move
        $(".myButton").toggle(300);

        $("#menuButton").click(function(){
            $(".myButton").toggle(300);
        });
    });
</script>

Lastly, add a CSS rule to stop the menu items with two words from wrapping:

.myButton {
    white-space: nowrap;
}

button keeps nudging when toggled with jquery

Question

1 answers

solution1
0 2015-10-14 21:18:54

button keeps nudging when toggled with jquery

Question

1 answers

solution1 0 2015-10-14 21:18:54

solution1
0 2015-10-14 21:18:54