Author Topic: Menübereich beim scrollen stehen lassen  (Read 8617 times)

Offline imebro

  • Posts: 745
Menübereich beim scrollen stehen lassen
« on: July 06, 2015, 11:55:28 AM »
Hallo,

ich würde für eine WB-Website gerne mal das Menü ganz oben am Rand so anbringen, dass es auch beim herunter scrollen stehen bleibt.
Zusätzlich möchte ich den Hintergrund des Menü´s dann gerne ein wenig durchsichtig haben.

Wie mache ich das am besten mit WB?

Danke und Gruss,
imebro

fischstäbchenbrenner

  • Guest
Re: Menübereich beim scrollen stehen lassen
« Reply #1 on: July 06, 2015, 01:37:45 PM »
Das hat mit WB nichts zu tun, und du machst es mit WB genauso wie mit anderen CMS.

Das Menu muss grundsätzlich position:absolute haben und einen höheren z-index als anderes.

das Javascript dazu so ungefähr:
Code: [Select]
var menulocked=false;
$(window).bind( "scroll", function() {
checkscrolled();
});



function checkscrolled() {
var scrollTop = $(window).scrollTop();
var menuewrappertop = 100;

p = scrollTop;
if (p > menuewrappertop) {
if (menulocked==false) {
document.getElementById('topmenucontainer').style.position = "fixed";
document.getElementById('topmenucontainer').style.top = (0-menuewrappertop)+ "px";
document.getElementById('topmenucontainer').style.opacity = "0.8";
}
menulocked=true;
} else {
if (menulocked==true) {
document.getElementById('topmenucontainer').style.position = "absolute";
document.getElementById('topmenucontainer').style.top = "0px";
document.getElementById('topmenucontainer').style.opacity = "1";
}
menulocked=false;
}
}


Es gibt weitere Möglichkeiten (die letztlich aber alle auf das rauslaufen)
Manche arbeiten mit 2 Menüs, die umgeschaltet (sichtbar) werden. Dann muss nur das 2. Menü position=fixed haben.
« Last Edit: July 06, 2015, 01:48:25 PM by fischstäbchenbrenner »

Offline Martin Hecht

  • Betatester
  • **
  • Posts: 566
  • Gender: Male
    • meine Homepage
Re: Menübereich beim scrollen stehen lassen
« Reply #2 on: July 06, 2015, 01:59:37 PM »
das ganze als ausgefeilte Fertiglösung, die man nur noch ins eigene Template einbinden muss, um  z.B. innerhalb einer solchen div-section ein showmenu2 anzuzeigen, wäre das hier:

www.jtricks.com/javascript/navigation/floating.html

Offline imebro

  • Posts: 745
Re: Menübereich beim scrollen stehen lassen
« Reply #3 on: July 07, 2015, 08:47:21 PM »
Hallo,

mit dem Link von "Martin Hecht" komme ich nicht klar.
Keine Ahnung, was ich nun wo eingeben muss.

Die Angaben von "fischstäbchenbrenne r" funktionieren nicht... jedenfalls wenn ich "position:absolute" und einen z-index von 100 einfach im CSS im Bereich "#menu" eintrage.
Da verändert sich nichts... Mit dem Javascript-Code weiß ich - ehrlich gesagt - nichts anzufangen  :roll:

Zur Info:
Das Menü befindet sich in einem extra Container, der zusätzlich noch einen zentrierten inneren Bereich hat, der sich wiederum in einem Container befindet.
In diesem inneren Bereich befindet sich das Menü.

Hier mal der Code für den oberen Teil:

Code: [Select]
#container_oben{
background-color: #fde803;
}

#container_oben_innen{
width:1300px;
height: 166px;
margin: auto;
background-color: #fde803;
color: #808080;
}


#menu {
float: left;
width: auto;
height: auto;
position: absolute;
z-index: 100;
margin-left: 10px;
margin-top: 74px;
}

Hier habe ich die Angaben "position + z-index" schon testweise eingetragen.
Wie gesagt, bleibt der gesamte obere Container inkl. Menü unverändert.

Was kann ich tun?

Danke und Gruss,
imebro

Offline Martin Hecht

  • Betatester
  • **
  • Posts: 566
  • Gender: Male
    • meine Homepage
Re: Menübereich beim scrollen stehen lassen
« Reply #4 on: July 07, 2015, 10:47:58 PM »
Hi,

Das Javascript sorgt dafür, dass sich das Menü an eine vorgegebene Position zurück schiebt, wenn man die Seite scrollt. Dazu muss man das floating.js Skript in das Template Directory kopieren und das Template editieren. Die betreffenden Ausschnitte auf einer meiner Seiten sieht so aus:

Die index.php:

Code: [Select]
<html>
<head>
...
<!--include floating.js in the header-->
<script type="text/javascript" src="<?php echo TEMPLATE_DIR?>/floating.js">
</script>
...
</head>
<body>
...
<!-- this is the menu -->
<div id="floatdiv"><div id="nav"><?php show_menu2(1SM2_ROOTSM2_ALLSM2_ALL'<li><a h
ref="[url]" class="[class]"><span>[menu_title]</span></a>'
'</li>''<ul class="ullev[level]">''</ul>'falsefalse);?>
</div><!--end nav--></div><!--end floating-->
...
<script type="text/javascript"> floatingMenu.add('floatdiv',{ targetTop: 70 }); </script>
...
</body>
</html>

und im css müssen die entsprechenden div-Bezeichner definiert sein. Bei mir sieht das so aus:
Code: [Select]
#nav, #nav ul { /* all lists */
                padding: 0;
                margin: 0;
                list-style: none;
                float : left;
                width : 180px;
}


#nav li { /* all list items */
                position : relative;
                float : left;
                display:block;
                width: 180px;
                height:auto;
                border: 0px solid black;
                background: #761f27 no-repeat;
}
...
       
es folgen weitere Definitionen von Formaten für verschachtelte div, ul, li...  damit wird eine Menüstruktur erzeugt, bei der die Unterseiten aufklappen, wenn man mit der Maus über die darüberliegende Seite fährt. Aber das hat per se nichts mit dem Floating-Menu zu tun.

Martin

Offline Martin Hecht

  • Betatester
  • **
  • Posts: 566
  • Gender: Male
    • meine Homepage
Re: Menübereich beim scrollen stehen lassen
« Reply #5 on: July 08, 2015, 07:20:18 AM »
Hallo nochmal,

wenn das Menü in deinem Fall gar nicht gescrollt werden soll, ist der Style "position: fixed"  die einfachere Lösung:
http://www.w3.org/Style/Examples/007/menus
Auch hier muss man das css vom verwendeten Template anpassen und in der index.php vom Template evtl. eine passende div-section einbauen , die dann fix irgendwo stehen bleiben soll.

In meinem Fall ging das leider nicht, da das Menü zu groß wurde und ansonsten z.B. auf kleinen Netbooks aus dem Bildschirm hinausragte. So kam ich auf die  Javascript-Lösung. Damit kann man dann immer noch scrollen, aber wenn dann das Menü aus dem sichtbaren Bereich rausgescrollt werden würde, bewegt es sich wieder zurück.

viele Grüße,
Martin

fischstäbchenbrenner

  • Guest
Re: Menübereich beim scrollen stehen lassen
« Reply #6 on: July 08, 2015, 09:42:09 AM »
Es gibt ja einige Templates in der Suche, die ein feststehendes Menü haben.
Das zb: http://WebsiteBaker.at/wb-templates/template-cloudz.html

Im Kern funktionieren feststehende Menüs immer gleich:
Das Menü sollte ein eigener Block (div) abseits von allem anderen sein, also direkt im <body>
Alles, was für den wrapper (also den div, der die Seite umfasst) gilt, mach auch genauso für den Menü-div. zb width: 980px; margin 0 auto;
Den Menü-Div mach dann: position:fixed oder position: absolute;

ein eventuelles Javascript schaltet beim scrollen nur fixed/absolute um.

Eine 2. Möglichkeit:
Du machst ein 2. Menü (mit gleichem Inhalt), wieder wie oben position:fixed usw. aber: display: none.
per Javascript schaltest du beim scrollen auf display: block;

Offline imebro

  • Posts: 745
Re: Menübereich beim scrollen stehen lassen
« Reply #7 on: July 08, 2015, 11:30:09 AM »
Hallo und danke bis dahin...

Habe eben mal etwas herum probiert, nachdem ich mir Eure Links angeschaut habe, sowie Eure Erklärungen.

Zwar schaffe ich es, das Menü grundsätzlich oben am Rand zu fixieren... aber dann springt das Bild, welches sich im Container darunter befindet, auch ganz nach oben (also quasi hinter das Menü). Gebe ich dem Container darunter dann ein "margin-top: 166 px" an (Höhe des Menüs), dann springt das Menü auch um diese 166 px weiter nach unten und oben am Bildschirmrand entsteht ein 166 px großer weißer Bereich nicht NICHTS  :roll:

Hier mal der Code des DIV-Containers, in dem das Menü ist:

Code: [Select]
#container_oben{
background-color: #fde803;
}

#container_oben_innen{
width: 1300px;
height: 166px;
margin: auto;
background-color: #fde803;
color: #808080;
}

Zur Erklärung:

Der "container_oben" enthält lediglich einen gelben Hintergrund und soll horizontal immer den gesamten sichtbaren Bildschirmbereich füllen.
In diesem Container gibt es dann noch einen "container_oben_inne n". Dieser ist im anderen Container zentriert, hat eine bestimmte Größe und enthält auch das Menü.

Die Menü-Links stehen dabei am linken Rand des inneren Containers und Titel + Logo der Website am rechten Rand.

Nun sollen quasi beide Container oben fixiert werden.
Trage ich jedoch nun die Angaben >>  position: fixed; z-index: 100; <<  im "container_oben_inne n" ein, habe ich den oben beschriebenen Effekt.

Habt Ihr eine Idee?

Danke und Gruss,
imebro

Offline imebro

  • Posts: 745
Re: Menübereich beim scrollen stehen lassen
« Reply #8 on: July 08, 2015, 11:45:20 AM »
...Ergänzung:

Mit dem folgenden Code habe ich es nun geschafft, dass der innere Container (mit dem Menü) so stehen bleibt am oberen Rand.
Allerdings scrollt der äußere obere Container noch immer mit... und das ändert sich auch nicht, wenn ich auch diesem nochmal die Angabe
>> position: fixed; z-index: 100; <<  gebe.

Code: [Select]

#container_oben{
background-color: #fde803;
height: 166px;
}

#container_oben_innen{
width: 1300px;
height: 166px;
margin: auto;
margin-left: 302px;
position: fixed;
z-index: 100;
background-color: #fde803;
color: #808080;
}

Allerdings ist das "margin-left: 302px" unsinnig, denn bei einem breiteren oder schmaleren Bildschirm würde es dann nicht mehr in der Mitte stehen. Diesen Container müßte ich also irgendwie wieder zentrieren... Mit "margin: auto" funktioniert es jedoch nicht  :roll:

Habt Ihr da noch ne weitere Idee?

Danke und Gruss,
imebro
« Last Edit: July 08, 2015, 11:53:35 AM by imebro »

fischstäbchenbrenner

  • Guest
Re: Menübereich beim scrollen stehen lassen
« Reply #9 on: July 08, 2015, 01:03:01 PM »
margin: 0 auto;

Und klar ist margin-left: 302px; unsinn, wenn du den Container zentriert haben willst.
Du musst den äußeren Container position:fixed machen. 

Offline imebro

  • Posts: 745
Re: Menübereich beim scrollen stehen lassen
« Reply #10 on: July 08, 2015, 02:23:33 PM »
Hmmm.... klappt leider auch nicht.

Habe den Code jetzt so verändert:
Code: [Select]
container_oben{
background-color: #fde803;
height: 166px;
margin: 0 auto;
position: fixed;
z-index: 100;
}

#container_oben_innen{
width: 1300px;
height: 166px;
/* margin: auto; */
background-color: #fde803;
color: #808080;
}

Jetzt steht oben alles am linken Rand, als ob der obere (äußere) Container verschwunden wäre und der darin befindliche zentrierte Container nun ganz nach links verschoben wurde.

Außerdem ist das Bild darunter (mittlerer Container) nun wieder bis ganz nach oben... hinter den oberen Container hoch gerutscht  :cry:

LG
imebro

Offline imebro

  • Posts: 745
Re: Menübereich beim scrollen stehen lassen
« Reply #11 on: July 08, 2015, 02:48:49 PM »
Habe mal aufgezeichnet, wie es eigentlich aussehen soll (siehe Anhang unten).

Hier sieht man oben den oberen Container (gelb). Dieser geht über den ganzen horizontalen Bereich und enthält den inneren Container mit dem Menü.
Den inneren Container sieht man jedoch nicht, da er auch den gleichen gelben Hintergrund hat.

Darunter ist der mittlere Container (rot)... welcher wieder einen inneren Container enthält mit dem Foto. Hier sieht man dann links + rechts neben dem Foto auch den farbigen Bereich (hier rot).

Darunter der untere Container (gelb)...  welcher wieder einen inneren Container enthält mit dem eigentlichen Inhalt (Text der Seite). Auch hier ist links + rechts daneben wieder ein farbiger Bereich sichtbar (hier gelb).

Ganz unten der Footer (rot)... welcher ebenso wieder einen inneren Container hat. Beide haben aber den gleichfarbigen Hintergrund (rot) und der innere Container enthält den Footer-Text.

So soll es aussehen. Klappt ja auch grundsätzlich... nur nicht, wenn der obere Teil (Container oben + oben_innen) einfach da oben am Rand stehen bleiben sollen.

Hoffe so wird es etwas deutlicher  :roll:

Danke und schöne Grüße,
imebro

fischstäbchenbrenner

  • Guest
Re: Menübereich beim scrollen stehen lassen
« Reply #12 on: July 08, 2015, 03:16:23 PM »
die grobe struktur:
Code: [Select]
<body style="background-color:#eee;">
<div id="wrapper" style="padding-top:166px; max-width:1300px; margin:0 auto; height:2000px; background-color:#fff;" >
<h1>hier kommt deine Seite ohne menü rein</h1>
</div>

<div id="container_oben" style="position:fixed; top:0; left:0; height:166px; z-index:500; width:100%; background-color:#0ff;">
     <div id="container_oben_inne n" style="max-width:1300px; height:100%; margin:0 auto; background-color:#00f;">
             Hier kommt dein Menü rein
     </div>
</div>
</body>
Das padding-top im wrapper brauchst du, damit die Seite nicht oben unter dem menü verschwindet.

EDIT:
http://WebsiteBaker.at/templates/imebro.html


« Last Edit: July 08, 2015, 03:35:40 PM by fischstäbchenbrenner »

Offline imebro

  • Posts: 745
Re: Menübereich beim scrollen stehen lassen
« Reply #13 on: July 08, 2015, 03:31:32 PM »
OK und danke für die Mühe  (Y)

Du schreibst "hier kommt deine Seite ohne menü rein".
Was meinst Du mit "Seite"?
Was kommt in diesen Bereich?

Das würde also bedeuten, dass ich oben nicht einen äußeren und einen darin befindlichen weiteren (zentrierten) Container habe, sondern nur einen --> in Deinem Beispiel "wrapper"?

Im Moment sieht das in meiner "index.php" vom Aufbau her so aus:

Code: [Select]
<div id="container_oben">
          <div id="container_oben_innen">
               <div id="menu">
        <?php
show_menu2(0,SM2_ROOT,SM2_CURR+1,SM2_TRIM,'........................................... ?>

   </div>
                         <div>
                       </div>

Grundsätzlich hatte das ja funktioniert... nur nicht mit dem oberen Teil inkl. Menü, welches stehen bleiben soll.

Danke und Gruss,
imebro
« Last Edit: July 08, 2015, 03:38:25 PM by imebro »

fischstäbchenbrenner

  • Guest
Re: Menübereich beim scrollen stehen lassen
« Reply #14 on: July 08, 2015, 03:38:26 PM »
also CSS:

#container_oben {position:fixed; top:0; left:0; height:166px; z-index:500; width:100%; background-color:#0ff;}
#container_oben_innen {max-width:1300px; height:100%; margin:0 auto; background-color:#00f;}

Den rest lass mal wie er ist.

Offline imebro

  • Posts: 745
Re: Menübereich beim scrollen stehen lassen
« Reply #15 on: July 08, 2015, 03:44:03 PM »
jaaaaaaaaaaa.... so langsam wird´s :)

Oberer Teil sieht jetzt gut aus und ist auch fixiert beim scrollen.
Allerdings springt das FOTO (unter dem Menü) noch immer ganz nach oben und verschwindet zum Teil hinter dem Menü.

Und das FOTO steht auch ganz links am Rand, anstatt in der Mitte.

LG
imebro

fischstäbchenbrenner

  • Guest
Re: Menübereich beim scrollen stehen lassen
« Reply #16 on: July 08, 2015, 03:53:11 PM »
Hast du um den Rest herum einen wrapper gemacht?
<div id="wrapper" style="padding-top:166px; max-width:1300px; margin:0 auto;  background-color:#fff;" >
Alles was NICHT Header ist
</div>


Das z-index im container_oben lass eventuell weg oder setze es auf einen möglichst niedrigen wert.

So insgesamt:
Dass man sowas in der Form nur selten sieht, liegt NICHT daran, dass es niemanden eingefallen ist, sondern dass du dir damit gewichtige Nachteile einfängst -  denen du vielleicht nicht Herr wirst.

Links auf einen Anker: Dabei wird so gescrollt, dass der der Anker hinter dem Menü ist. Auf die Idee, dass man da erst wieder scrollen muss, kommt nicht leicht wer. jQuery zum "nachrücken" ist möglich, funktioniert aber nicht immer.
Generell hast du mit allem Schwierigkeiten, wo per jQuery eine vertikale Position bestimmt wird.
Bildergalerien verhalten sich mitunter seltsam.
Je nach Handy (Android, iPhone, Tablet) unerwartete Verhalten, bis hin zur völligen Unbrauchbarkeit. Beim Zoomen wird oft der Header mitgezoomt und verdeckt alles.
Und noch anderes...

Nicht zuletzt nimmst du viel Platz auf dem Schirm weg. Manche haben einen niedrigen Schirm.

Deswegen wird sowas in der Regel so gemacht, dass  nur ein sehr schmaler Streifen vom Menü gezeigt wird, nicht der ganze Header. Das klemmt aber dann wieder mit Logos usw.

Offline imebro

  • Posts: 745
Re: Menübereich beim scrollen stehen lassen
« Reply #17 on: July 08, 2015, 03:56:55 PM »
hmmm... Du hast natürlich Recht.
Vielleicht sollte ich das einfach lassen. War aber dennoch hilfreich, um mal zu sehen, wie sowas überhaupt funktioniert.

Jetzt möchte ich jedoch noch auf jeder Seite ein anderes FOTO haben.
Dazu habe ich den folgenden Link gefunden:
Tutorial link removed 404
Die Variante 2 finde ich gut und werde ich mal testen. Aber dafür mache ich dann ggf. einen neuen Thread auf denke ich.

Danke für Deine Mühe...   (Y)

Schöne Grüße,
imebro
« Last Edit: December 31, 2017, 03:20:31 PM by Luisehahne »

 

postern-length