[HTML5 en CSS] Sticky top menu problemen

[mrtnptrs]

Ik ben een site, die ik in het verleden heb gemaakt voor een schoolproject, aan het verbeteren, moderner maken en om aan het bouwen voor een nieuw priveproject. Ik ben nu al eerst begonnen natuurlijk met de code van de site zelf aan te passen alvorens ik aan de inhoud begin. Hierbij ben ik begonnen met de menubalk aan te passen/compleet opnieuw aan het maken volgens de voorbeelden op W3Schools.

Mijn doel is om de menubalk ongeveer op dezelfde manier in te richten als hier op Tweakers. De menubalk moet dus de volgende functies hebben:
-Uiteindelijk een logo links in de menubalk (nog niks over uitgezocht, dus nu nog niet relevant)
-Dropdown-menu (verticaal, net zoals bij Tweakers.net)
-De menubalk moet sticky zijn (net zoals bij Tweakers.)
-De menubalk moet het browserwindow zowel links, rechts en boven continu raken, net zoals bij Tweakers.
-Er moet een beetje ruimte zitten tussen de menubalk en de container/body met tekst (zoals nu het geval is)
-Het moet werken op zowel mobiel als pc.
-Uiteindelijk moet de menubalk dus volledig responsive worden met een hamburgermenu of zo. Hier moet ik zelf nog over nadenken qua hoe ik dat het liefste zou hebben. Dus dit punt is ook nog niet heel relevant.

Nu heb ik afgelopen dagen heel wat geprobeerd. Helaas heb ik een aantal fouten er niet uit kunnen krijgen, zelfs na veel Googelen en opzoeken op W3Schools:
-Links, rechts en boven de menubalk zit nog steeds een rand van de achtergrond. Ik wil dus eigenlijk dat de menubalk deze kanten gewoon raakt.
-Als je scrollt verspringt de menubalk als het ware: de menubalk raakt dan wel netjes de rechterkant en bovenkant van het browserscherm (waarom nu wel ineens?!), maar niet de linkerkant.... zucht....
-Het dropdown-menu werkt opzicht goed, alleen worden de links daarin horizontaal weergeven i.p.v. verticaal.

De pagina waar je al deze fouten het best kunt zien is deze pagina: https://elzendaaltyb.nl/algemeneinfo (alles wat aan informatie in de body staat is verouderd, niet relevant en niet privacy-gevoelig!) Wie zou mij kunnen helpen om deze fouten te verhelpen? Hieronder kunnen jullie de code zien die er op dit moment gebruikt wordt voor de menubalk.

De desbetreffende HTML-code van de menubalk is:

HTML:

<div class="navbar" id="navbar">
    <a href="index">Home</a>
    <a href="inzamelen">Geld voor Kika!</a>
    <a href="algemeneinfo">TYB-informatie</a>
    <a href="activiteiten">Activiteiten</a>
    <div class="dropdown">
        <button class="dropbtn">Dropdown 
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
            <a href="inschrijven"><b>INSCHRIJVEN!</b></a>
            <a href="media">Media</a>
            <a href="contactformulier">Contact</a>
            <a href="inschrijven"><b>INSCHRIJVEN!</b></a>
            <a href="media">Media</a>
            <a href="contactformulier">Contact</a>
            <a href="inschrijven"><b>INSCHRIJVEN!</b></a>
        </div>
    </div> 
</div>

De desbetreffende CSS-code is:

Cascading Stylesheet:

#navbar {
  overflow:hidden;
  background-color:#DC191B;
  margin-bottom:10px;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: black;
}

/* Page content */
.container {
  padding: 16px;
}

/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the navbar */
.dropdown .dropbtn {
    font-size: 17px; 
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #DC191B;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .container {
  padding-top: 60px;
}

De desbetreffende Javascript-code die is gebruikt om de balk sticky te maken (al zou volgens mij dit alles ook mogelijk moeten zijn zonder javascript te gebruiken):

JavaScript:

<script type="text/javascript">
    // When the user scrolls the page, execute myFunction 
    window.onscroll = function() {myFunction()};

    // Get the navbar
    var navbar = document.getElementById("navbar");

    // Get the offset position of the navbar
    var sticky = navbar.offsetTop;

    // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }
</script>

[Herby]

Prachtig idee, alleen denk ik dat je nogal verouderd aan het werk bent. Je probeert nu javascript door iemand anders ontwikkelt aan te passen en het ook nog eens responsive te maken. Persoonlijk denk ik dat je een stuk meer leert als je een bestaand framework uitzoekt en daar in gaat ontwikkelen. Niet omdat het niet zelf te doen is, maar je nu een heleboel in een keer moet gaan snappen.

Je kunt kijken naar zaken als WP of joomla.

(Los van dit alles, je menu is sticky, misschien ook eens een andere browser erbij pakken )

[funkeey]

Hi,

Je navigatie springt ineens in omdat je navigatie fixed wordt. Omdat je body een marge heeft links en rechts, rekent je fixed vanaf de na de margin. Hij lijnt wel rechtsgoed uit omdat de navigatie als het ware gewoon opschuift, het is zelfs erbuiten ook zichtbaar als je dat zou kunnen zien.

twee opties:
- body { margin: 0 } wat heel gebruikelijk is in de vorm van een reset of normalize.
- op je sticky class left: 0; en right: 0; toevoegen.

Verder je dropdown, niet de beste optie, werkt crossbrowser namelijk niet goed. Dus daar zou ik nog wel naar kijken. Je container staat op min-width: 169px; en je items op float: left; Hierdoor komen ze gewoon achter elkaar. Wat er ook nog gebeurd is dat de items van #navbar a, je items van .dropdown-content a overschrijven. Ik zou de items classnames meegeven.

Je container zou ik de gewenste breedte meegeven en je items niet floaten, maar gewoon op 100% zetten.

[Aganim]

Je container staat op min-width: 169px; en je items op float: left; Hierdoor komen ze gewoon achter elkaar.

Maar mocht het naast elkaar tonen nu wel de bedoeling zijn: probeer dan altijd eerst of er een betere optie is dan naar floats te grijpen. Een inline block trekt items niet uit de flow, werkt voorspelbaarder en zorgt daarom doorgaans voor minder problemen dan een float.

Mocht je float vs inline-block discussies tegenkomen: kijk altijd even hoe oud die discussie is, de afgelopen jaren is nogal wat veranderd qua CSS ondersteuning. Inline-block had vroeger het nadeel dat IE er niet goed mee om ging, maar versies waar dit nog voor op gaat tref je inmiddels alleen nog aan op end-of-life versies van Windows.

Hoewel het voor een menu wellicht wat overkill is kan je je ook verdiepen in Flex boxes. Flexibeler dan inline-blocks en kan je veel handwerk besparen.

Niet echt een antwoord op je vraag, maar wel even een aanvulling.

[mrtnptrs]

Okee, na de suggesties van @funkeey , heb ik inderdaad de margin van de body op nul gezet en dit lost deze 2 problemen op:

-Links, rechts en boven de menubalk zit nog steeds een rand van de achtergrond. Ik wil dus eigenlijk dat de menubalk deze kanten gewoon raakt.
-Als je scrollt verspringt de menubalk als het ware: de menubalk raakt dan wel netjes de rechterkant en bovenkant van het browserscherm (waarom nu wel ineens?!), maar niet de linkerkant.... zucht....

Helaas werkt nu de gehele dropdown niet meer: de dropdown komt niet meer tevoorschijn. Daarnaast kom ik er maar niet achter waarom de dropdownknop denkt dat ie veel langer is dan hij zou moeten zijn; Hij lijkt een heel eind rechts uit te steken tot het einde van de balk, waardoor hij veel lege ruimte op de menubalk opslokt. Kan iemand mij helpen om deze twee problemen op te lossen?

Ik heb nu alleen maar de CSS bijgewerkt. De bijgewerkte CSS-code staat hieronder (body heeft een margin van 0 nu, staat niet in onderstaande):

Cascading Stylesheet:

#navbar {
  overflow:hidden;
  background-color:#DC191B;
  margin-bottom:10px;
  position:sticky;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: black;
}

/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    /*float: left;*/
    overflow: hidden;
}

/* Style the dropdown button to fit inside the navbar */
.dropdown .dropbtn {
    font-size: 17px; 
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #DC191B;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 60;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  top: 0;
  width: 100%;
  margin-bottom:10px;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .container {
  padding-top: 60px;
}

@Herby Waarom ben ik dan precies "verouderd" aan het werken? Wat bedoel je precies? Daarnaast wil ik puur zelf met HTML, CSS en Javascript het liefste coden. Ik vind het juist interessant en wil ervan leren. Ik vind het coden vooral leuk voor de hobby. Weet niet eens of ik mijn project wel ooit ga uitvoeren , maar vind het gewoon leuk om aan een site te werken.

[R4gnax]

mrtnptrs schreef op woensdag 2 mei 2018 @ 23:27:
Waarom ben ik dan precies "verouderd" aan het werken?

Even een paar die ik er uit pik:

• float:left voor horizontale layout, ipv display:flex.
• position:fixed ondersteund met een JavaScript toggle, i.p.v. position:sticky voor sticky menu bars.
• Geen :focus of :active voor feedback aan keyboard en touch gebruikers.
• Een overbodige type="text/javascript op je <script> element. (Dat is tegenwoordig default.)

[ Voor 8% gewijzigd door R4gnax op 05-05-2018 15:00 ]

[Aganim]

R4gnax schreef op zaterdag 5 mei 2018 @ 14:58:
[...]

• Een overbodige type="text/javascript op je <script> element. (Dat is tegenwoordig default.)

Opzich overbodig, maar het kan geen kwaad om expliciet te definiëren. Erger is dat

code:

text/javascript

in 2006 al is afgeserveerd en vervangen door

code:

application/javascript