Aanpassen "button" mobiel menu

Status
Niet open voor verdere reacties.
R

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
Sorry maar daar ben ik weer.

Op mijn website was de weergave van het mobiele menu een bruin/goud blokje met daarin 2 witte streepjes. *knip*

Nu had mijn klant op een andere website een mobiel menu gezien met alleen 3 streepjes (ipv 2) met daarachter het woord "MENU"

Zo wil hij het graag hebben.

Na veel gepuzzel heb ik het bruine blokje met witte streepjes aan weten te passen naar alleen 2 bruine streepjes *knip*

Maar dat zouden dus 3 streepjes moeten zijn met daarachter het woord "MENU"

Ik krijg het zelf jammer genoeg niet voor elkaar.

Ik heb echt lang zitten zoeken, ik gebruik dit forum echt niet om er maar makkelijk vanaf te zijn maar ik kom er echt niet aan uit.

Als bijlage een overzicht van hoe het nu is en hoe het zou moeten worden.
 
Laatst bewerkt door een moderator:
Vind je die drie streepjes niet in awesome font?
Even stylen met een kleurtje, de tekst erbij en klaar.
 
Ik zoek me een breuk maar font-awesome.min.css is niet echt overzichtelijk.

En ook als je niet precies weet waarnaar je moet zoeken maakt het een stuk lastiger.
 
Ik heb hier de aanpassing van het blokje gedaan om de achtergrondkleur hetzelfde te maken als de kleur van de menubalk. en de kleur van de streepjes te wijzigen:

Code: 
#nav-wrap > a {
	   width: 48px;
		height: 48px;
		text-align: left;
		background-color: #333;
		position: relative;

      border: none;
      float: right;

      font: 0/0 a;
      text-shadow: none;
      color: transparent;

      position: relative;
      top: 26px;
      right: 36px;
   }

	#nav-wrap > a:before,
   #nav-wrap > a:after {
	   position: absolute;
		border: 2px solid #cd9a52;
		top: 35%;
		left: 25%;
		right: 25%;
		content: '';
	}
 
Laatst bewerkt:
rob1970 zei:
Ik zoek me een breuk maar font-awesome.min.css is niet echt overzichtelijk.

En ook als je niet precies weet waarnaar je moet zoeken maakt het een stuk lastiger.
Klik om te vergroten...
Niet overzichtelijk? Op hun site staat alles duidelijk aangegeven.
 
Ik ben een grotere beginner dan jij waarschijnlijk denkt.

Ik wist niet eens dat hier een website van was.

Ik heb die nu wel gezien maar weet nog steeds niet waar ik dan moet zoeken.

Ik heb bijvoorbeeld als zoekterm "mobile-btn" ingetikt. maar waarschijnlijk zit ik op het verkeerde spoor
 
Laatst bewerkt:
Hier kom je wel mee verder denk ik. Dit is een aanpassing op *knip*
Code: 
<style>
body {
    background-color: #333;
}
@media only screen and (max-width: 900px) {
    #nav-wrap > a {
        width: 120px;
        padding-top: 3px;
        border: 1px solid #aaa;
        border-radius: 3px;
        font: 400 24px/1.5 raleway-light, sans-serif;
        text-align: center;
        color: #ddd;
    }
    #nav-wrap > a:before,
    #nav-wrap > a:after {
        border: 0;
    }
}
</style>

<nav id="nav-wrap">
    <a class="mobile-btn" href="#nav-wrap" title="Toon menu">Menu ☰</a>
    <a class="mobile-btn" href="#" title="Verberg menu">Menu ☰</a>

Aanvulling: ik zie dat helpmij van de html code automatisch een hamburger maakt.
Het hamburger teken in html is: Menu & #9776;
maar dan zonder de spatie tussen de & en de # (vergeet de ; niet achter 9776)
 
Laatst bewerkt door een moderator:
Ik waardeer enorm de moeite die jullie allemaal nemen om mij verder te helpen.

Maar ik kom er toch niet uit.

Als ik dit

Code: 
<style>
body {
    background-color: #333;
}
@media only screen and (max-width: 900px) {
    #nav-wrap > a {
        width: 120px;
        padding-top: 3px;
        border: 1px solid #aaa;
        border-radius: 3px;
        font: 400 24px/1.5 raleway-light, sans-serif;
        text-align: center;
        color: #ddd;
    }
    #nav-wrap > a:before,
    #nav-wrap > a:after {
        border: 0;
    }
}
</style>

<nav id="nav-wrap">
    <a class="mobile-btn" href="#nav-wrap" title="Toon menu">Menu ☰</a>
    <a class="mobile-btn" href="#" title="Verberg menu">Menu ☰</a>

Op de plaats wegzet van dit:
Code: 
#nav-wrap > a {
	   width: 48px;
		height: 48px;
		text-align: left;
		background-color: #333;
		position: relative;

      border: none;
      float: right;

      font: 0/0 a;
      text-shadow: none;
      color: transparent;

      position: relative;
      top: 26px;
      right: 36px;
   }

	#nav-wrap > a:before,
   #nav-wrap > a:after {
	   position: absolute;
		border: 2px solid #cd9a52;
		top: 35%;
		left: 25%;
		right: 25%;
		content: '';
	}

krijg ik dit (zie screenshot)

Waarschijnlijk bedoel je niet dat dit daar moet komen..
Ligt niet aan jouw uitleg maar aan mijn beperkte kennis.
Ook dat van die hamburger is voor mij een raadsel.

Ik denk dat ik de klant maar ga overtuigen dat 2 streepjes ook mooi is.

In ieder geval bedankt voor alle moeite.
 
Laatst bewerkt door een moderator:
Ik had aangegeven dat ik *knio* had gebruikt. Daarin zie ik geen wijzigingen :confused:
Om misverstanden te voorkomen hieronder een geoptimaliseerde versie met daarin de aanpassingen.
Let op de 2 regels die je moet aanpassen: spatie weghalen tussen &# 9776;
Code: 
<!doctype html>
<html class="no-js" lang="nl" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>xxxxx - Bouw, ontwerp en zwembaden</title>
<meta name="description" content="">
<meta name="author" content="xxxxx">
<!-- css -->
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/media-queries.css">
<link rel="stylesheet" href="index.css">
<style type="text/css">
body {
    background-color: #333;
}
@media only screen and (max-width: 900px) {
    #nav-wrap > a {
        width: 120px;
        padding-top: 3px;
        border: 1px solid #aaa;
        border-radius: 3px;
        font: 400 24px/1.5 raleway-light, sans-serif;
        text-align: center;
        color: #ddd;
    }
    #nav-wrap > a:before,
    #nav-wrap > a:after {
        border: 0;
    }
}
</style>
<!-- script -->
<script src="js/modernizr.js"></script>
<!-- favicons -->
<link rel="shortcut icon" href="favicon.ico" >
</head>
<body>

<!-- header -->
<header>
  <div class="row">
    <div class="twelve columns">
      <div class="logo">
        <img src="images/xxxx_logo.png">
      </div>
      <nav id="nav-wrap">
        <!-- volgende 2 regels: spatie weghalen tussen &# 9776; -->
        <a class="mobile-btn" href="#nav-wrap" title="Toon menu">Menu &# 9776;</a>
        <a class="mobile-btn" href="#" title="Verberg menu">Menu &# 9776;</a>
        <ul id="nav" class="nav">
          <li class="current"><a href="index.html">Home</a></li>
          <li><a href="bouwenontwerp.html">Bouw & ontwerp</a></li>
          <li><a href="zwembaden.html">Zwembaden</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<!-- intro -->
<section class="xop-container">
  <div class="xop-left"><a href="bouwenontwerp.html"><img src="leeg2.png" width="100%"></a></div>
  <div class="xop-right"><a href="zwembaden.html"><img src="leeg2.png" width="100%"></a></div>
</section>

<!-- scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/doubletaptogo.js"></script>
<script src="js/init.js"></script>
</body>
</html>



Over die hamburger :) Vergelijk het plaatje hieronder met code 9776 op https://www.w3schools.com/charsets/ref_utf_symbols.asp



Suc6. Have fun.
 
Laatst bewerkt door een moderator:
jippie

Het is gelukt.

Ik heb het nog een klein beetje aangepast qua kleur, volgorde en het randje weggehaald.

Het resultaat staat hier. *knip*


Ik heb nog wel geprobeerd om de 3 streepjes even hoog te krijgen als het woord "menu"

Maar dat is niet gelukt.

Ik ben benieuwd of de klant het goedkeurt. Ik denk het wel. Erg bedankt.
 
Laatst bewerkt door een moderator:
Dat is een klein verschil maar het lijkt 1 pixel kleiner te zijn Het hamburger symbool is gewoon een "karakter" net als de M en andere letters. Het hoort even groot te zijn. Laat maar weten of je dit gecorrigeerd wilt hebben.

menu-btn.jpg
 
Laatst bewerkt:
Ik keek net op mijn telefoon en daar is het idd even hoog.

Op mijn imac had ik in eerste instantie gekeken in firefox.

En daar zijn de 3 streepjes wat lager.

Maar op mijn imac in safari staan ze wel goed.

Zie screenshot (links is safari op imac, rechts is firefox op imac)

Ik ben er erg blij mee en geholpen.

Bedankt en fijn weekend verder.
 
Laatst bewerkt door een moderator:
Minpuntje voor Firefox, deze browser heeft een klein marktaandeel wat kleiner wordt.
Chrome, Safari en Edge (vanaf dit jaar) zijn voorzien van dezelfde layout-engine (webkit) en daarop werkt het goed.
En op Opera wordt het ook goed weergegeven.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan