Floating-Menü

[Ronny]

Guten Morgen,

weiß evtl jemand, wie man ein Floating-Menü so einbauen kann wie auf dieser Seite?
Also so, dass es bis an den oberen Rand mitscrollt und dann dort stehen bleibt.

Grüße und ein schönes Wochenende
Ronny

[nettesekel]

DAs hier schein sich mit ein paar Anpassungen in NOF realisieren zu lassen. Weiß nicht, wie fit du in Sachen html/css bist.
http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

[Ronny]

Hallo nettesekel,

Weiß nicht, wie fit du in Sachen html/css bist.

  leider gar nicht. Sind für mich bömische Dörfer. 

[Cadfael]

Hallo NE,

ist es nicht recht einfach möglich einem Layout-Bereich eine "Div id" zuzuordnen und dann alles was "stehen bleiben soll" in diesen Layoutbereich zu packen???

Viele Grüße
Andreas

[nettesekel]

Hi Cadfael...

Keine Ahnung. Das was ich da gefunden habe, funktioniert ja und ist vom Grundsatz auch nicht soooo kompliziert aufgebaut. Aber wenn er in html/css gar keine Kenntnisse hat, ist es egal welche Lösung man nimmt, er kann es nicht allein umsetzen und braucht eine Step-by-Step-Anleitung. Dafür fehlt mir Stand-aktuell leider die Zeit, weil man das nicht in 10 Minuten aus dem Ärmel schütteln kann.
Und fängst du irgendeinen Kompromiss an, dann wird schlussendlich doch 50 mal nachgehakt bis es optimal ist und man ist bei selbem Zeitaufwand für einen Kompromiss. Das lässt sich gar nicht verhindern.

l.g. nettesekel

ps. Lass dich nicht davon abhalten es zu testen!

[nettesekel]

Umsetzbar ist die oben erwähnte Lösung in NOF definitiv... nur die Anleitung kann ich nicht aus dem Ärmel zaubern. Und ohne zu Wissen ob der TE jemals wieder kommt habe ich auch wenig Motivation damit zu beginnen. http://demos.nof-community.de/horizontale-menuleiste-die-am-oberen-bildschirmrand-stehen-bleibt-NOF/demo.html

[Ronny]

War leider ein paar Tage verhindert.

Danke auf jeden Fall schon mal für Eure Mühe.
Wenn ich "etwas" Zeit finde, werde ich es mal mit dem Menü von Backslash probieren.
Vielleicht bekomnme ich es ja doch irgendwie hin. 

Wünsche allen ein schönes Wochenende

[nettesekel]

Wenn ich weiß, dass noch ernsthaftes Interesse besteht, würde ich ja gucken, dass ich mal ein Tut zusammengeschustert bekomme, aber ich wußte ja gar nicht, ob du dich nochmal blicken lässt.

[Ronny]

Hatte wenig Zeit. Sorry.
Stehe im Moment etwas im Stress. Daher eilt es auch nicht.
Will meine Site auf längere Sicht mal umgestalten. Ist ja nicht so, dass mein Internetauftritt nicht da ist.... Dann würde es drängeln. 

Also, mach Dir nur keinen Stress.

[tomathen]

Also ich bin ja immer interessiert  Das ist schon ein gutes Feature um ehrlich zu sein. Aber nur wenn Zeit ist! 

[Inno]

Leider geht der Link zum Tutorial nicht. ;-(
http://demos.nof-community.de/horizontale-menuleiste-die-am-oberen-bildschirmrand-stehen-bleibt-NOF/demo.html

[nettesekel]

Der Link ist korrigiert.

Hier nochmal der Direktlink: https://www.nof-community.de/nuetzliche-funktionen-und-elemente-fuer-websites-mit-nof/floating-menubar-in-netobjekts-fusion-(mitscrollendes-menu)/

[Inno]

Hi, das war leider auch nicht der richtige Link.
Ich suche das Tutorial, wo die Menüleiste beim Scrollen oben am Bildschirmrand kleben bleibt. Wie hier im Demo.
http://demos.nof-community.de/horizontale-menuleiste-die-am-oberen-bildschirmrand-stehen-bleibt-NOF/demo.html

Nur leider ist dort der Link zum tutorial falsch.

LG!

[nettesekel]

Umsetzbar ist die oben erwähnte Lösung in NOF definitiv... nur die Anleitung kann ich nicht aus dem Ärmel zaubern. Und ohne zu Wissen ob der TE jemals wieder kommt habe ich auch wenig Motivation damit zu beginnen. http://demos.nof-community.de/horizontale-menuleiste-die-am-oberen-bildschirmrand-stehen-bleibt-NOF/demo.html

Jetzt dämmert es wieder... das ist der Grund dafür, dass der Link nicht stimmt. Es gibt noch gar kein Tutorial dazu.

[nettesekel]

Ich finde leider auch die Vorlage zu diesem Test nicht, da ich selbst im letzten Jahr den PC gewechselt habe und gefühlte 300 Vorlagen auf dem PC liegen.

Wenn man in den QT der Demo-Seite schaut, kann man aber eigentlich sehen, wie das im wesentlichen realisiert wurde.

1 . Der Doctype stehlt bei mir auf Loose. Falls es also irgendwo hakt, sollte man den umstellen.

2. Zwischen den Headtags der Seite findet sich etwas CSS und ein kleines Script.

Code: HTML5

1. <style type="text/css">
2. .container { width:990px; margin:0 auto; }
3. #top_wrapper { margin:0 0 20px 0; }
4.  
5. #sticky_navigation_wrapper { width:100%; height:50px; }
6. #sticky_navigation { width:100%; height:50px; background:#10375E; padding-top: 17px;}
7. </style>
8.  
9. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
10.  
11. <script>
12. $(function() {
13.  
14.         // grab the initial top offset of the navigation
15.         var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
16.        
17.         // our function that decides weather the navigation bar should have "fixed" css position or not.
18.         var sticky_navigation = function(){
19.                 var scroll_top = $(window).scrollTop(); // our current vertical position from the top
20.                
21.                 // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
22.                 if (scroll_top > sticky_navigation_offset_top) {
23.                         $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
24.                 } else {
25.                         $('#sticky_navigation').css({ 'position': 'relative' });
26.                 }  
27.         };
28.        
29.         // run our function on load
30.         sticky_navigation();
31.        
32.         // and run it again every time you scroll
33.         $(window).scroll(function() {
34.                  sticky_navigation();
35.         });
36.        
37.         // NOT required:
38.         // for this demo disable all links that point to "#"
39.         $('a[href="#"]').click(function(event){
40.                 event.preventDefault();
41.         });
42.        
43. });
44. </script>

3. Damit die im eigefügten Code angesprochenen Bereiche dann auch in NOF gefunden werden müssen diese in NOF entsprechend gekennzeichnet werden.
Dem Quelltext nach müsste man die Navileiste auf ein Textfeld oder einen Layoutbereich legen (bitte gucken was sich eignet) Textfeld oder LB müssten als html-Einfügung vor dem Tag folgenden Code zugewiesen bekommen:

Code: HTML5

1. <div id="top_wrapper">
2.         <div id="sticky_navigation_wrapper">
3.                 <div id="sticky_navigation">
4.                         <div class="container">

und nach dem Tag diesen Code:

Code: HTML5

1.                         </div>
2.                 </div>
3.         </div>
4.  
5.        
6. </div><!-- #top_wrapper -->

CSS muss natürlich an die eigenen Bedürfnisse angepasst werden.

Das sollte es eigentlich gewesen sein. Ich hoffe, das hilft weiter.