Slide out Side Nave not Sliding out

Topic: Slide out Side Nave not Sliding out

austin pro asked 7 years ago

Hello, I am a n00b at web design and coding so I assume I am doing something wrong. I copy/pasted your code to implement the slide out nav (which looks TOTALLY AWESOME) but it is not actually sliding out. The hamburger button renders and I can click on it, but as far as I can tell it is doing nothing or maybe just reloading the page. I am not getting any .js errors or other kind of information from firebug or dreamweaver, and I do not THINK anything is getting passed into the functions wrong. Here is my code which I created by adding the slide out nav to the Full-page image Background template that you have posted on this site. Any assistance you can provide would be dopalicoius. :



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Design Bootstrap Template</title>

    <!-- Material Design Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="/css/mdb.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="/css/style.css" rel="stylesheet">
    
    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>

    <!-- Material Design Bootstrap -->
    <script type="text/javascript" src="/js/mdb.js"></script>
  	<!--<script type= "text/javascript" src = "/js/modules/sidenav.js"></script>
    <script type = "text/javascript" src = "/js/modules/dropdown.js"></script>-->
    
    <script>
 // Initialize collapse button
  $('.button-collapse').sideNav();
  // Initialize collapsible (uncomment the line below if you use the dropdown variation)
 // $('.collapsible').collapsible();
</script>

</head>

<body>

    <!--Navigation-->
    
    
    <!-- SideNav slide-out button -->
    <a href="#"><i class="material-icons">menu</i></a>
    <!--/. SideNav slide-out button -->      
                
<!-- Sidebar navigation -->
	<ul id="slide-out" class="side-nav">
        <!-- Logo -->
        <div class="logo-wrapper">
            <a href="#"><img src="/img/df.png" /></a>
        </div>
        <!--/. Logo -->

        <!-- Side navigation links -->
        <ul class="collapsible collapsible-accordion">
            <li><a>Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#">CUSTOM SYSTEMS</a>
                        </li>
                        <li><a href="#">SERVICES</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a>Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#">SALES</a>
                        </li>
                        <li><a href="#">RENTAL EQUIPMENT</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a>Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#">ABOUT US</a>
                        </li>
                        <li><a href="#">CONTACT US</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <!--/. Side navigation links -->

    </ul>
    <!--/. Sidebar navigation -->     

<!-- Intro image -->
    <section class="full-bg-img">
        <div class="container">
            <div class="space-30"></div>
            <div class="space-30"></div>
            <div class="verticalcenter text-center"> </div>
        </div>
    </section>
    <!--/. Intro image -->

    <!-- Footer -->
    <footer class="page-footer" if="footer">
        <!--Footer Content-->
        <div class="container">
            <div class="row center-on-small-only">
                <!--First column-->
                <div class="col-md-3">
                    <p class="white-text center-on-small-only">GET STARTED</p>
                    <p class="white-text center-on-small-only">Register for free and start to create amazing things.</p>
                    <a href="http://mdbootstrap.com/material-design-for-bootstrap/" target="_blank"><i class="fa fa-download right"></i>Get started</a>
                </div>
                <!--/.First column-->

                <!--Second column-->
                <div class="col-md-2 col-md-offset-1">
                    <p class="column-title white-text">USEFUL LINKS</p>
                    <ul>
                        <li><a href="http://mdbootstrap.com/material-design-for-bootstrap/">About MDB</a></li>
                        <li><a href="http://mdbootstrap.com/forums/forum/support/">Suport</a></li>
                        <li><a href="http://mdbootstrap.com/forums/forum/bugs/">Bug Report</a></li>
                        <li><a href="http://mdbootstrap.com/wp-content/uploads/2015/09/MDB-License.pdf">License</a></li>
                    </ul>
                </div>
                <!--/.Second column-->

                <!--Third column-->
                <div class="col-md-2">
                    <p class="column-title white-text">MDB Free Popular</p>
                    <ul>
                        <li><a href="http://mdbootstrap.com/templates/">Templates</a></li>
                        <li><a href="http://mdbootstrap.com/css/animations/">Animations</a></li>
                        <li><a href="http://mdbootstrap.com/components/forms/">Forms</a></li>
                        <li><a href="http://mdbootstrap.com/javascript/carousel/">Carousel</a></li>
                        <li><a href="http://mdbootstrap.com/components/buttons/">Buttons</a></li>
                        <li><a href="http://mdbootstrap.com/javascript/parallax/">Parallax</a></li>
                    </ul>
                </div>
                <!--/.Third column-->

                <!--Fourth column-->
                <div class="col-md-2">
                    <p class="column-title white-text">MDB Pro Popular</p>

                    <ul>
                        <li><a href="http://mdbootstrap.com/sets/e-commerce/">E-commerce Set</a></li>
                        <li><a href="http://mdbootstrap.com/sets/magazine/">Magazine Set</a></li>
                        <li><a href="http://mdbootstrap.com/components/cards/">Cards</a></li>
                        <li><a href="http://mdbootstrap.com/javascript/sidenav/">SideNav</a></li>
                        <li><a href="http://mdbootstrap.com/components/material-box/">MaterialBox</a></li>
                        <li><a href="http://mdbootstrap.com/components/social-buttons/">Social Buttons</a></li>
                    </ul>
                </div>
                <!--/.Fourth column-->

                <!--Fifth column-->
                <div class="col-md-2 text-center">
                    <p class="column-title white-text">SOCIAL MEDIA</p>

                    <a target="_blank" href="https://www.facebook.com/mdbootstrap"><i class="fa fa-facebook"> </i></a>
                    <a target="_blank" href="https://twitter.com/MDBootstrap"><i class="fa fa-twitter"> </i></a>
                    <a target="_blank" href="https://plus.google.com/u/0/b/107863090883699620484/107863090883699620484/posts"><i class="fa fa-google-plus"> </i></a>
                </div>
                <!--/.Fifth column-->
            </div>
        </div>
        <!--/.Footer Content-->

        <!--Coprytights-->
        <div class="footer-copyright text-center rgba-black-light">
            <div class="container-fluid">
                © 2015 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
            </div>
        </div>
        <!--/.Coprytights-->
    </footer>
    <!-- Footer -->

    

</body>

</html>

Add comment

Michal Szymanski staff answered 7 years ago

0 0 Best answer

Hi Mike, it's very easy to achieve. Use our SideNav but remove class "fixed". Here you can see a working example.

Add comment

Mike Hutter free answered 7 years ago

0 0 Best answer

Michal, My company just bought the Pro version and I am starting to create a template from scratch. I too would like to create a template that the side menu is hidden by default very much like this one: https://www.getmdl.io/templates/android-dot-com/index.html Is there documentation on how to achieve this effect? Thanks, Mike

Add comment

Michal Szymanski staff answered 7 years ago

0 0 Best answer

Hi Austin, I sent you a message. Check please your mailbox.

Add comment

austin pro answered 7 years ago

0 0 Best answer

I am still having issues with this. Have you had a chance to take a look at it?

Add comment

austin pro answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

I may have misunderstood the documentation. Does the slide out functionality only occur on small screen sizes i.e mobile device? With the fixed side nav menu always being visisble on larger devices? What I was anticipating (and would really like to have) is a nav menu that is hidden by default and toggleable by a button at all screen sizes. THe slide out functionality is just gravy on top. Is my understanding correct now? Also, if you have any code worked up to make my ideal of the always toggleable menu happen and are willing to share that would be AWESOME! If this is right, then I do not have a menu because I did not insert the "fixed html" portion and I have only been working with this on a desktop screen. Please let me know on all accounts. Thank you sir.

Add comment

Michal Szymanski staff answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, firstly, you don't need to link a javascript modules. In your SCRIPTS section leave only:

<!– JQuery –>
<script type=”text/javascript” src=”/js/jquery.min.js”></script>

<!– Bootstrap core JavaScript –>
<script type=”text/javascript” src=”/js/bootstrap.min.js”></script>

<!– Material Design Bootstrap –>
 <script type="text/javascript" src="js/mdb.js"></script>

<script>
 // Initialize collapse button
  $(".button-collapse").sideNav();
  // Initialize collapsible (uncomment the line below if you use the dropdown variation)
  $('.collapsible').collapsible();
</script>

...and it should work. If not, please send me all your files to my email m.szymanski@mdbootstrap.com PS: I'm glad you like it. Thanks :)

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

austin

Pro User 10Support score
1Questions 2Answers 0Snippets