Bestaande website responsive maken - beginnen met een menu ?

Status
Niet open voor verdere reacties.
L

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Een responsive uitklapmenu gevonden bij W3Schools
Code: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #333;
}

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

.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav with Dropdown</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

Problemen
- hoe kunnen bij de 3 mogelijkheden bij 'Dropdown' bijvoorbeeld nog 3 mogelijkheden bijgecreëerd worden ?
- hoe bijvoorbeeld 5 dropdown mogelijkheden bijcreëren aan News ?
- en hoe hoofdmogelijkheden bijmaken.

Dank voor inzicht.
 
Dit klinkt een beetje als een huiswerkvraag? Ik denk dat je met logisch kijken al een hoop op weg komt.
Probeer eens wat, daar leer je van!

Als je een vierdelige puzzel in elkaar zou kunnen zetten, dan zou je dit ook wel op kunnen lossen, lijkt mij ;)

Maar voor het gemak heb ik het even in stukken verdeeld. Misschien geeft dat meer overzicht!
HTML: 
<div class="topnav" id="myTopnav">

  <a href="#home" class="active">Home</a>

  <a href="#news">News</a>

  <a href="#contact">Contact</a>

  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 

  <a href="#about">About</a>

  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>

</div>
 
Laatst bewerkt:
Aar, dank voor de aanzet, helaas wil het vierde en laatste puzzeldeeltje mijn codes (nog) niet volgen.

in GSM-formaat
staat 'Contactueel' naast 'Newsbrieven' i.p.v. er onder - aanpasbaar ?
geeft 'Newsbrieven' maar 2 sublinken i.p.v. de 5 in desktop ?
Zijn er soms beperkingen op aantal en/of op lengte van aantal top-items ?

Code: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #333;
}

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

.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}



.newsbrieven {
  float: left;
  overflow: hidden;
}

.newsbrieven .newsbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.newsbrieven-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.newsbrieven-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .newsbrieven:hover .newsbtn {
  background-color: #555;
  color: white;
}

.newsbrieven-content a:hover {
  background-color: #ddd;
  color: black;
}

.newsbrieven:hover .newsbrieven-content {
  display: block;
}







.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {

  .topnav a:not(:first-child), .newsbrieven .newsbtn .dropdown .dropbtn {

    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">

  <a href="#home" class="active">Home</a>
  
  <a href="#news">Blablablagroen</a>
  
  <a href="#news">Holderdebolder</a>
  
  <a href="#news">Beste_van_het_beste</a>
  
  <div class="newsbrieven">
     <button class="newsbtn">Newsbrieven 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="newsbrieven-content">
      <a href="#">NewsLink 1</a>
      <a href="#">NewsLink 2</a>
      <a href="#">NewsLink 3</a>
      
      <a href="#">NewsLink 4</a>
      <a href="#">NewsLink 5</a>
           
    </div>
  </div>
  
  <a href="#contact">Contactueel</a>
  
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
           
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav with Dropdown</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

Ik zoek ook naar een soort if...then : 'als pagina X vertoond wordt op een GSM, dan wordt dit sitepagina Y - anders X ?

Dank voor tips
 
Laatst bewerkt:
Heb je een voorbeeld op JSfiddle?
 
Dat is een zandbak/Sandbox.
Zie www.jsfiddle.net

Vul je code in en save en deel het.
 
Het verschil tussen Jsfiddle en Helpmij ontgaat mij - wat is de meerwaarde van Jsfiddle ?
 
Dat we mee kunnen kijken, en aan kunnen passen.
 
jsFiddle.net staat los van Helpmij omdat jsFiddle geen Nederlands forum is waar je vragen kan stellen.
Jouw code heb ik geplakt in een Fiddle (klik), dat kan voor sommige helpers makkelijker zijn.
 
Laatst bewerkt:
In plaats van losse scriptjes die je overal vandaan "plukt" kan je ook kiezen voor een layout library, bijvoorbeeld Bootstrap (klik).

De pagina is dan erg eenvoudig en je hebt veel functionaliteit die je kan invoegen. Nog een voordeel is dat je voor Bootstrap veel voorbeelden op internet kan vinden.
Code: 
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mijn Website</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
 integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>

<!-- hier komt jouw pagina -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
 integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

Een responsive menu is nu eenvoudig. Alleen html is nodig (klik).
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan