html - Hovedmenu JScript Fejl - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css jquery javascript

Bruger #16025 @ 30.01.15 12:38

Kære udviklere,

Jeg sidder pt. med et hemmeligt projekt hvor jeg har lavet en lidt mærkelig fejl. En reference kunne være; I kender sikkert alle sammen det at man går ind på et website, scroller ned på siden, og så følger menuen med hvis man er scrollet over et x-antal pixel. Se, det har jeg sådan set lavet. Mit problem ligger i at jeg gerne vil skjule den menu indtil man klikker på en knap.

På dette link har jeg uploadet 3 billeder som viser hvad jeg har lavet indtil videre.

Problem: Når jeg scroller ned på siden, klikker på knappen der skal vise menuen, og klikker på den igen for at lukke menuen og derefter scroller op på siden - så bliver min header-menu (den på billede 1) skjult.

Html

HTML kode

 <div id="toppanel" class="header row">
     <div id="logo" class="col-3 row">
     </div>
 
     <div id="menu" class="col-8 row">
         <!-- Dynamisk menu -->
     </div>
 </div>
 
 <div class="show_hide_menu">
     <a href="#">åbn</a>
 </div>

JScript

JScript kode

 // document ready
 var $doc = $(document);
 
 $doc.scroll(function() {
     if($doc.scrollTop() > 153) {
         $("#toppanel").addClass("scrolled");
         $("#wrapper").css("padding-top", "150px");
         $(".show_hide_menu").css("display", "block");
     } else {
         $("#toppanel").removeClass("scrolled");
         $("#wrapper").css("padding-top", "0px");
         $(".show_hide_menu").css("display", "none");
     }
 });
 
 $(".show_hide_menu a").click(function(e) {
     e.preventDefault();
 
     var dis = $(".scrolled").css("display");
 
     if(dis == "none") {
         $(".scrolled").css("display", "block");
         $(".show_hide_menu").css("top", "45px");
         $(".show_hide_menu a").html("luk");
     } else {
         $(".scrolled").css("display", "none");
         $(".show_hide_menu").css("top", "0");
         $(".show_hide_menu a").html("åbn");
     }
 });

Jeg har ikke lagt sitet op endnu, da det kører på localhost. Jeg håber at I kan forstå meningen med hvad jeg vil frem til, og hvad min fejl er.

Hvis ikke - så spørg løs. Jeg skal nok lave flere billeder :-)

Indlæg senest redigeret d. 30.01.2015 12:40 af Bruger #16025

2 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 30.01.15 12:54

1.258

I stedet for display:none, display:block på menuen, når du trykker knappen. Så hav den evt. placeret udenfor viewporten.

Bruger #16025 @ 30.01.15 12:58

442

JScript kode

 $(".show_hide_menu a").click(function(e) {
      e.preventDefault();
  
      var scroll = $(".scrolled");
  
      if(scroll) {
          scroll.css("top", "0");
          $(".show_hide_menu").css("top", "45px");
          $(".show_hide_menu a").html("luk");
      } else {
          scroll.css("top", ("-" + scroll.css("height")));
          $(".show_hide_menu").css("top", "0");
          $(".show_hide_menu a").html("åbn");
      }
  });

F.eks. sådan? Eller hvordan mener du?

UPDATE 30/01/2015 14:28
Jeg har løst mit problem. Dog er der stadig en lille detalje der skal ordnes, men ellers virker det perfekt nu :-)

JScript kode

 // scrolling effects - start
 
 var doc             = $(document);
 var navigation      = $("#toppanel");
 var scrolled        = $(".scrolled");
 var close           = $(".show_hide_menu");
 var close_button    = $(".show_hide_menu a");
 
 function open_menu() {
     navigation.css("top", "0");
     close.css("top", "50px");
     close_button.html("?");
 }
 
 function close_menu() {
     navigation.css("top", "-45px");
     close.css("top", "5px");
     close_button.html("?");
 }
 
 doc.scroll(function() {
     if(doc.scrollTop() > 153) {
         navigation.addClass("scrolled");
         close.css("display", "block");
 
         close_menu();
     } else {
         close.css("display", "none");
         close_menu();
         navigation.removeClass("scrolled");
     }
 });
 
 close_button.click(function(e) {
     e.preventDefault();
 
     if(navigation.css("top") == "-45px") {
         open_menu();
     } else {
         close_menu();
     }
 });
 
 // scrolling effects - end

Indlæg senest redigeret d. 30.01.2015 14:29 af Bruger #16025

Hovedmenu JScript Fejl

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler