18008 sujets

Questions générales et questions de débutants

Comment fermer le menu responsive au clic ?

Smiley bawling Bonjour voici mon problème

Je personnalise un theme.

Sur mon menu (en hamburger) je voudrais le faire disparaître quant on clic sur une des catégories.
C'est un menu en FULLWIDTH, et au clic les catégories restent affichées sur mon écran Smiley decu

Help car cela me rend fou. D'autre part avec un autre menu ça marchait bien mais celui là il ne se passe rien.

Merci pour votre aide

ci-dessous ma page


<!DOCTYPE html>
<html lang="FR">
    <head>
        <title>test</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta charset="utf-8">
        <meta name="author" content="Roman Kirichik">
        <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        
        <!-- Favicons -->
        <link rel="shortcut icon" href="images/favicon.png">
        <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
        <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
        
        <!-- CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/style-responsive.css">
        <link rel="stylesheet" href="css/animate.min.css">
        <link rel="stylesheet" href="css/vertical-rhythm.min.css">
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/magnific-popup.css">        

        
    </head>
    <body class="appear-animate">
        
        <!-- Page Loader -->        
        <div class="page-loader">
            <div class="loader">Chargement...</div>
        </div>
        <!-- End Page Loader -->
        
        <!-- Page Wrap -->
        <div class="page" id="top">
            
            <!-- Logo -->
            <div class="fm-logo-wrap local-scroll">
                <a href="special-photographer-1.html" class="logo"><img src="images/photographer/fm-logo.png" width="152" height="54" alt="" /></a>
            </div>
            <!-- End Logo -->
            
            <!-- Menu Button -->
            <a href="#" class="fm-button local-scroll"><span></span>Menu</a>
            <!-- End Menu Button -->
            
            <!-- Menu Overlay -->
            <div id="fullscreen-menu" class="fm-wrapper">
                <div class="fm-wrapper-sub">
                    <div class="fm-wrapper-sub-sub">
                        
                        <ul class="fm-menu-links ">
                            
                            <li>
                                <a href="#home" class="active">Acceuil</a>
                            </li>
                            
                            <!-- Item With Sub -->
                            <li>
                                <a href="#folio" class="fm-has-sub local-scroll">Portfolio</a>

                            </li>
                            
                            
                            <!-- End Item With Sub -->
                            <li>
                                <a href="#moi" class="fm-has-sub">MOI</a>

                            </li>
                            <!-- End Item With Sub -->
                            
                            <li>
                                <a href="#">Contact</a>
                            </li>
                            
                        </ul>
                        
                        <!-- Social Links -->
                        <div class="fm-social-links">
                            <a href="#" target="_blank"><i class="fa fa-dribbble"></i></a>
                            <a href="#" target="_blank"><i class="fa fa-behance"></i></a>
                            <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
                        </div>
                        <!-- End Social Links -->
                        
                    </div>
                </div>
                
            </div>
            <!-- End Menu Overlay  -->
            
            <!-- Home Section -->
            <section class="fade-out-scroll-1 home-section bg-dark-alfa-30 parallax-2" data-background="images/full-width-images/section-bg-6.jpg" id="home">
                <div class="js-height-full container">
                    
                    <!-- Hero Content -->
                    <div class="home-content">
                        <div class="home-text">
                            
                            <h1 class="wow fadeInUp hs-line-8 no-transp font-alt mb-50 mb-xs-30" data-wow-duration="1s" data-wow-delay="1s">
                                Lorem ipsum in
                            </h1>
                            
                            <h2 class="wow fadeInUp hs-line-12 font-alt mb-50 mb-xs-30" data-wow-duration="1s" data-wow-delay="1.25s">
                                SIT AMET DOLOREM
                            </h2>
                            
                            <div class="wow fadeInUp local-scroll" data-wow-duration="1.80s" data-wow-delay="1.80s">
                                <a href="#folio" class="btn btn-mod btn-border-w btn-medium btn-round">Work</a>
                           </div>
                        </div>
                    </div>
                    <!-- End Hero Content -->
                    
                </div>
            </section>
            <!-- End Home Section -->            
            
            <!-- Portfolio Section -->
            <section id="folio" class="page-section pb-0">
                <div class="relative">
                    
                    <!-- Works Filter -->                    
<!--                    <div class="works-filter font-alt align-center">
                        <a href="#" class="filter active" data-filter="*">All works</a>
                        <a href="#" class="filter" data-filter=".branding">Branding</a>
                        <a href="#" class="filter" data-filter=".design">Design</a>
                        <a href="#" class="filter" data-filter=".photography">Photography</a>
                    </div>  -->                  
                    <!-- End Works Filter -->
                    
                    <!-- Works Grid -->
                    <ul class="works-grid work-grid-2 clearfix font-alt hover-white hide-titles masonry" id="work-grid">
                        
                        <!-- Work Item (Lightbox) -->
                        <li class="work-item mix photography">
                            <a href="images/portfolio/full-project-1.jpg" class="work-lightbox-link mfp-image">
                                <div class="work-img">
                                    <img src="images/portfolio/projects-1.jpg" alt="Work" />
                                </div>
                                <div class="work-intro">
                                    <h3 class="work-title">Portrait</h3>
                                    <div class="work-descr">
                                        Lightbox
                                    </div>
                                </div>
                            </a>
                        </li>
                        <!-- End Work Item -->
                        
                        <!-- Work Item (External Page) -->
                        <li class="work-item mix branding design">
                            <a href="portfolio-single-1.html" class="work-ext-link">
                                <div class="work-img">
                                    <img class="work-img" src="images/portfolio/masonry/projects-2.jpg" alt="Work" />
                                </div>
                                <div class="work-intro">
                                    <h3 class="work-title">Vase 3D</h3>
                                    <div class="work-descr">
                                        External Page
                                    </div>
                                </div>
                            </a>
                        </li>
                        <!-- End Work Item -->
                        
                        <!-- Work Item (External Page) -->
                        <li class="work-item mix branding">
                            <a href="portfolio-single-1.html" class="work-ext-link">
                                <div class="work-img">
                                    <img class="work-img" src="images/portfolio/projects-3.jpg" alt="Work" />
                                </div>
                                <div class="work-intro">
                                    <h3 class="work-title">Boy in T-shirt</h3>
                                    <div class="work-descr">
                                        External Page
                                    </div>
                                </div>
                            </a>
                        </li>
                        <!-- End Work Item -->
                        
                        <!-- Work Item (External Page) -->
                        <li class="work-item mix design photography">
                            <a href="portfolio-single-1.html" class="work-ext-link">
                                <div class="work-img">
                                    <img class="work-img" src="images/portfolio/projects-4.jpg" alt="Work" />
                                </div>
                                <div class="work-intro">
                                    <h3 class="work-title">Space</h3>
                                    <div class="work-descr">
                                        External Page
                                    </div>
                                </div>
                            </a>
                        </li>
                        <!-- End Work Item -->
                        
                        <!-- Work Item (External Page) -->
                        <li class="work-item mix design">
                            <a href="portfolio-single-1.html" class="work-ext-link">
                                <div class="work-img">
                                    <img class="work-img" src="images/portfolio/masonry/projects-7.jpg" alt="Work" />
                                </div>
                                <div class="work-intro">
                                    <h3 class="work-title">Model</h3>
                                    <div class="work-descr">
                                        External Page
                                    </div>
                                </div>
                            </a>
                        </li>
                        <!-- End Work Item -->
                        
                        <!-- Work Item (Lightbox) -->
                        <li class="work-item mix design branding">
                            <a href="images/portfolio/full-project-3.jpg" class="work-lightbox-link mfp-image">
                                <div class="work-img">
                                    <img src="images/portfolio/projects-6.jpg" alt="Work" />
                                </div>
                                <div class="work-intro">
                                    <h3 class="work-title">Young Man</h3>
                                    <div class="work-descr">
                                        Lightbox
                                    </div>
                                </div>
                            </a>
                        </li>
                        <!-- End Work Item -->
                        
                    </ul>
                    <!-- End Works Grid -->
                    
                </div>
            </section>
            <!-- End Portfolio Section -->
            
            
            <!-- About Section -->
            <section id="moi" class="page-section-home bg-gray-lighter">
                <div class="relative">
                    
                    <div class="container">
                    
                        <h2 class="section-title font-alt mb-70 mb-sm-40">
                            Lorem ipsum in dolorem
                        </h2>
                        
                        <div class="row">
                            <div class="col-md-8 col-md-offset-2">
                                
                                <div class="section-text align-center mb-70 mb-xs-40">
                                    In&nbsp;auctor ex&nbsp;id&nbsp;urna faucibus porttitor. Lorem ipsum dolor sit amet, 
                                    consectetur adipiscing elit. In&nbsp;maximus ligula semper metus pellentesque mattis.  
                                    Maecenas volutpat, diam enim sagittis quam, id&nbsp;porta quam. Sed id&nbsp;dolor 
                                    consectetur fermentum nibh volutpat, accumsan purus.
                                </div>
                                
                                <div class="align-center">
                                    <img src="images/photographer/signature.png" width="170" height="55" alt="" />
                                </div>
                                
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
            </section>
            <!-- End About Section -->
            
            
            <!-- Footer -->
            <footer class="page-section-footer bg-gray-lighter footer pb-60">
                <div class="container">
                    
                    <!-- Footer Logo -->
                    <div class="local-scroll mb-30 wow fadeInUp" data-wow-duration="1.2s">
                        <a href="#top"><img src="images/logo-footer.png" width="78" height="36" alt="" /></a>
                    </div>
                    <!-- End Footer Logo -->
                    
                    <!-- Social Links -->
                    <div class="footer-social-links mb-110 mb-xs-60">
                        <a href="#" title="Facebook" target="_blank"><i class="fa fa-facebook"></i></a>
                        <a href="#" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
                        <a href="#" title="Behance" target="_blank"><i class="fa fa-behance"></i></a>
                        <a href="#" title="LinkedIn+" target="_blank"><i class="fa fa-linkedin"></i></a>
                        <a href="#" title="Pinterest" target="_blank"><i class="fa fa-pinterest"></i></a>
                    </div>
                    <!-- End Social Links -->  
                    
                    <!-- Footer Text -->
                    <div class="footer-text">
                        
                        <!-- Copyright -->
                        <div class="footer-copy font-alt">&copy; Rod 702</div>
                        <!-- End Copyright -->
                        
                        <div class="footer-made">
                             www.rod702.com
 
                        </div>
                        
                    </div>
                    <!-- End Footer Text --> 
                    
                 </div>
                 
                 
                 <!-- Top Link -->
                 <div class="local-scroll">
                     <a href="#top" class="link-to-top"><i class="fa fa-caret-up"></i></a>
                 </div>
                 <!-- End Top Link -->
                 
            </footer>
            <!-- End Foter -->
        
        
        </div>
        <!-- End Page Wrap -->
        
        
        <!-- JS -->
        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script type="text/javascript" src="js/fadescroll.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>        
        <script type="text/javascript" src="js/SmoothScroll.js"></script>
        <script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>
        <script type="text/javascript" src="js/jquery.localScroll.min.js"></script>
        <script type="text/javascript" src="js/jquery.viewport.mini.js"></script>
        <script type="text/javascript" src="js/jquery.countTo.js"></script>
        <script type="text/javascript" src="js/jquery.appear.js"></script>
        <script type="text/javascript" src="js/jquery.sticky.js"></script>
        <script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
        <script type="text/javascript" src="js/jquery.fitvids.js"></script>
        <script type="text/javascript" src="js/owl.carousel.min.js"></script>
        <script type="text/javascript" src="js/isotope.pkgd.min.js"></script>
        <script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
        <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>
        <script type="text/javascript" src="js/gmap3.min.js"></script>
        <script type="text/javascript" src="js/wow.min.js"></script>
        <script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
        <script type="text/javascript" src="js/jquery.simple-text-rotator.min.js"></script>
        <script type="text/javascript" src="js/all.js"></script>
        <script type="text/javascript" src="js/contact-form.js"></script>
        <script type="text/javascript" src="js/jquery.ajaxchimp.min.js"></script>        
        <!--[if lt IE 10]><script type="text/javascript" src="js/placeholder.js"></script><![endif]-->
        
    </body>
</html>

Modifié par rod_702 (10 Nov 2016 - 16:17)
Coucou SuperMerguez

En fait au clic sur le burger
1// ça ouvre le sous menu sur tout l'écran

codyhouse.co/demo/full-screen-pop-out-navigation/index.html#0

2// toutes les catégories sont visibles et quand je clic dessus il faut que le sous menu disparaît
et que je scroll direct un paragraphe de la page.

OR dans mon cas le scroll fonctionne mais le sous menu reste apparait

je sais pas si t'arrive à me suivre
Modifié par rod_702 (08 Nov 2016 - 15:23)
SuperMerguez a écrit :
Salut,

on ne comprends pas ton propos

tu peux faire un codepen et y mettre ton code html et tout le toutim ?


Aie j'ai pas mal de fichier après je peux faire un MP
Coucou

je suis pas trop JS mai j'ai trouver un script.
le tric c'est que qu'arrive pas à le mettre en place.



(function($) {
    "use strict"; // Start of use strict

    // Closes the Responsive Menu on Menu Item Click
    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });
})(jQuery); // End of use strict


En changeant le nom des classes navbat-collapse et navbar toggle par les miennes il ne se passe rien ou alors je me loupe...

Smiley sweatdrop Smiley sweatdrop
Bonjour,

Moi j'ai compris le problème parce que j'ai le même...
Avez vous eu la solution?

Merci
Sujet clos
Aller à