margin bottom als menu item geselecteerd is werkt niet

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.414
Goedemorgen,
Ben al weer een tijdje aan het rommelen met css selector maar krijg het niet voor mekaar. Als een submenu item geselecteerd is wil ik een margin bottom aan een div geven.
Zie weer deze website; klik op products en security.
Als dan een margin-bottom van 7em bij #access komt dan schuift alles wat mooier naar beneden.

Menu item Products (#menu-item-451) heeft class .current-menu-parent.

Dus ik dacht:
Code: 
#menu-item-451.current-menu-page #access {
	margin-bottom: 7em;
}

Oh, wat anders geks is als ik op die submenu balk met muis ga dan wordt Products zwart... komt vast ergens vandaan maar weet niet hoe ik dat kan achterhalen met bijv. firebug.

Bedankt!
 
Het lijkt erop dat je ook een cross-browser bugje hebt. Gebruik eventueel dit als concept:
Code: 
/* menu framework */
.menu {
  margin:0; padding:0; list-style-type:none;
  position:relative; z-index:597; float:left; }
.menu ul, .menu li {
  margin:0; padding:0; list-style-type:none; }
.menu li {
  float:left; line-height:1em; vertical-align:middle; zoom:1; }
.menu li:hover {
  position:relative; z-index:599; cursor:default; }
.menu a, .menu span {
  display:block; text-decoration:none; }
.menu ul {
  visibility:hidden; position:absolute; top:100%; left:0;
  z-index:598; margin-top:0; }
.menu ul li {
  float:none; }
.menu ul ul {
  top:1px; left:99%; }
.menu li:hover > ul {
  visibility:visible; }

/* eerst opmaak voor [U]alle[/U] items toplevel/sublevel */
.menu {
}
.menu li {
}
.menu a {
}

/* dan afwijkende opmaak voor sublevels */
.menu ul {
}
.menu ul li {
}
.menu ul a {
}

/* dan opmaak voor classes en hover */
.menu li.menu-item-has-children {
}
.menu li.current-menu-item {
}
.menu li.current_page_item {
}
.menu li:hover {
}

/* hier eventueel afwijkende opmaak voor hover en classes op sublevels */
.menu li.current_page_item {
}
.menu li:hover {
}
 
hoi @bron, ik snap het niet helemaal. Is dit antwoord op mijn 1e vraag? Bedoel je dat ik het menu wat beter gestructureerd moet benaderen?
 
Yep. Ik zag ook je eerdere vraag dat het menu in sommige browsers niet (of niet goed) werkt. Met het menu framework gaat dit makkelijker. Hou de css van het menu in de juiste volgorde.
Er zijn meer styling variaties mogelijk maar die heb ik niet allemaal genoemd.

Noot: wijzig niets in het menu framework. Werk bij de opmaak van boven naar beneden.

***edit: begin altijd met <a> een width, height en padding te geven.
 
Laatst bewerkt:
Ik zag op je website een lineair submenu??

Als je een "lineair" menu wilt (sublevel op horizontale balk) dan moet je bij de opmaak dit toevoegen:

.menu {
background: transparent; /* toplevel kleur */
}
.menu li:hover {
position: static;
}
.menu ul {
width: 100%; /* sublevel horizontale balk */
margin-top: -1px;
background: #909090; /* sublevel background */
}
.menu ul li {
float: left;
background: transparent;
}
.menu ul a {
width: ....px; /* wat je wilt */
height: 30px;
}
.menu ul ul {
display: none !important;
/* er wordt nu 1 sublevel getoond, */
/* hier kun je css maken voor volgende levels */
}
 
hoi bron, klopt het samenvoegend dan zoals onderstaand?
En begrijp ik goed dat 1e gedeelte een soort reset is wat je bij alle sites zo kan gebruiken? Bedankt voor het geduld.

Code: 
/* menu framework */
.menu {
  margin:0; padding:0; list-style-type:none;
  position:relative; z-index:597; float:left; }
.menu ul, .menu li {
  margin:0; padding:0; list-style-type:none; }
.menu li {
  float:left; line-height:1em; vertical-align:middle; zoom:1; }
.menu li:hover {
  position:relative; z-index:599; cursor:default; }
.menu a, .menu span {
  display:block; text-decoration:none; }
.menu ul {
  visibility:hidden; position:absolute; top:100%; left:0;
  z-index:598; margin-top:0; }
.menu ul li {
  float:none; }
.menu ul ul {
  top:1px; left:99%; }
.menu li:hover > ul {
  visibility:visible; }

/* eerst opmaak voor alle items toplevel/sublevel */
.menu {
}
.menu li {
}
.menu a {
}

/* dan afwijkende opmaak voor sublevels */
.menu ul {
}
.menu ul li {
}
.menu ul a {
}

/* dan opmaak voor classes en hover */
.menu li.menu-item-has-children {
}
.menu li.current-menu-item {
}
.menu li.current_page_item {
}
.menu li:hover {
}

/* hier eventueel afwijkende opmaak voor hover en classes op sublevels */
.menu li.current_page_item {
}
.menu li:hover {
}


/ * lineair menu toevoeging */
.menu {
background: transparent; /* toplevel kleur */
}
.menu li:hover {
position: static;
}
.menu ul {
width: 100%; /* sublevel horizontale balk */
margin-top: -1px;
background: #909090; /* sublevel background */
}
.menu ul li {
float: left;
background: transparent;
}
.menu ul a {
width: ....px; /* wat je wilt */
height: 30px;
}
.menu ul ul {
display: none !important;
/* er wordt nu 1 sublevel getoond, */
/* hier kun je css maken voor volgende levels */
}
 
Dit is een voorbeeld van een lineair menu
Dit is een voorbeeld van een horizontaal menu boven (Producten)
Ik denk dat in jouw geval het onderste gedeelte (css voor lineair menu) eruit kan.

Het menu framework kan inderdaad voor elk type menu gebruikt worden zowel links, rechts, boven, onder en lineair. Het framework zelf mag je niet aanpassen.
 
Laatst bewerkt:
Dit zijn de concepten voor een normaal en een lineair menu. Je kunt vanuit hier verder uitwerken :d
Code: 
a {
  cursor:pointer;
}
a:active, a:focus {
  outline:0; outline-style:none; outline-width:0;
}

/********
**  zet op deze plek het menu framework
********/

/* algemene style voor alle items */
.menu a {
  width: 160px;
  height: 24px;
  padding-top: 6px;
  background: #fff;
  border: 1px solid #909090;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-clip: padding-box;
  color: #707070;
  font: normal 14px verdana,helvetica,sans-serif;
  line-height: 1;
  text-align: center;
}

/* (a) kies een gewoon menu */

.menu ul {
  border-bottom: 1px solid #808080;
}
.menu ul a {
  border-radius: 0;
  border-bottom-width: 0;
}
/* classes voor top/sublevel */
.menu .current_menu_item > a,
.menu .current_page_item a,
.menu a:hover {
  background: #808080;
  color: #fff;
}

/* (b) of kies een lineair menu */

.menu li:hover {
  position: static;
}
.menu ul {
  width: 100%;
  margin-top: -1px;
  background: #909090;
}
.menu ul li {
  float: left;
}
.menu ul a {
  width: auto;
  margin: 0 5px;
  padding: 6px 10px 0 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #000;
}
.menu ul ul {
  display: none !important;
} 
/* classes voor toplevel */
.menu .current_menu_item > a,
.menu .current_page_item a,
.menu a:hover {
  background: #909090;
  color: #fff;
}
/* classes voor sublevel */
.menu ul .current_menu_item > a,
.menu ul .current_page_item a,
.menu ul a:hover {
  color: #fff;
}
 
Aahh... nu valt alles wat meer op zijn plek. Heb e.e.a. uitgeprobeerd en het gaat beter. Ben nog in test (html/css) bezig en later dat omzetten naar de WordPress site (zal nog een klus worden).

Paar vragen;
1. Waarom gebruik je background-clip en position: static?

2. Ik probeer 3e submenu eraan te koppelen maar krijg die niet op juiste plek? (snap daar ook niet bij waarom .menu ul ul een waarde important meekrijgt)

3. Is er ook een framework als ik een verticaal menu ga maken?

4. Ben met display: block bezig geweest maar lukt niet; want ik wil dat de menus open blijven, tip ervoor?

Test site hier gezet.
 
1. background-clip: Voorkomen dat een background-color "lekt" door de border-radius.
static: In het framework staat position:relative. Voor een lineair menu moet dit worden teruggezet naar static. Een lineair menu komt weinig voor, daarom staat deze standaard op relative.

2. De waarde !important geeft aan dat de betreffende regel altijd voorrang heeft ongeacht wat er voor of na komt over waar de regel over gaat.
Het 3e submenu is uitgezet. Pas het volgende aan (even geen tijd om te testen)
.menu ul ul {
/* display: none !important; */
width: 100%;
background: #a0a0a0;
/* probeer volgende regels aan te passen */
margin-top: -1px;
top: 1px;
left: 99%;
}

3. Het menu framework zelf blijft uiteraard hetzelfde, onderaan dit toevoegen:
.menu { width: 200px; /* breedte menu */ }
.menu li { float: none; }
.menu ul { top: 1px; left: 99%; }

4. Om de menu's open te houden na een click is Javascript nodig. Dit kan niet met css worden gemaakt.
 
Hoi bron, snelle reactie weer zeg.
1. Kijk weer wat css commando's erbij geleerd. Heb bij w3schools dat van static opgezocht, dus normal document flow terug zetten.

2a. Ja snap dat met !important maar wist niet waarom jij het gebruikte omdat zonder het ook werkte maar goed.
2b. Nee 2e submenu werkt nog niet goed maar ik ga nog wat rommelen ermee.

3. Goh dat was eenvoudige code!

4. hey... waarom is het mij hier dan wel gelukt? Toch met display: block?
 
2. Bij een lineair menu is 1 sublevel gebruikelijk. Daarom was sublevel 2 met !important uitgezet.
Sublevel 2 werkt met de volgende css goed.
.menu ul ul {
background: #b0b0b0;
margin-top: 0;
top: 30px; /* height + padding van <a> */
left: 0; /* submenu links uitlijnen */
}

3. Ja, handig toch zo'n framework. Menu aan de rechterkant wat naar links uitklapt kan ook... toevoegen onder framework:
.menu { float: right; width: 200px; /* breedte menu */ }
.menu li { float: none; text-align: right; }
.menu ul { top: 1px; right: 99%; left: auto !important; }

4. Helaas, dit gaat echt niet met css!
Niet schikken, dit is de javascript die op de site staat van je linkje :confused:
Code: 
<script type="text/javascript">/* <![CDATA[ */window.background_manager_ajax={"url":"http:\/\/test.albuswebdesign.nl\/wordpresstest2\/wp-admin\/admin-ajax.php","action":"background-manager"};/* ]]> */</script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.8'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/jquery-collapse-o-matic/js/collapse.js?ver=1.5.4'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-includes/js/comment-reply.min.js?ver=3.8'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/themes/twentyten-child/js/mobile_nav.js?ver=3.8'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/meteor-slides/js/jquery.cycle.all.js?ver=3.8'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/meteor-slides/js/jquery.metadata.v2.js?ver=3.8'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/meteor-slides/js/jquery.touchwipe.1.1.1.js?ver=3.8'></script>
<script type='text/javascript'> 
var meteorslidessettings = {"meteorslideshowspeed":"2000","meteorslideshowduration":"5000","meteorslideshowheight":"310","meteorslideshowwidth":"960","meteorslideshowtransition":"fade"};</script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/meteor-slides/js/slideshow.js?ver=3.8'></script>
<script type='text/javascript'> 
var myatu_bgm = {"current_background":{"id":0,"url":"","alt":"","desc":"","caption":"","link":"","thumb":"","bg_link":"","transition":"crossfade","transition_speed":0},"change_freq":"0","active_gallery":"0","is_fullsize":"true","is_preview":"false","initial_ease_in":"true","info_tab_thumb":"true","bg_click_new_window":"false","bg_track_clicks":"false","bg_track_clicks_category":"Background Manager","display_on_mobile":"false","fs_center":"true"};
</script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/background-manager/resources/js/functions.js?ver=1.2.5.2'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/background-manager/resources/js/flux.js?ver=1.2.5.2'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/background-manager/resources/js/pub.js?ver=1.2.5.2'></script>
<script type='text/javascript'> 
var colomatduration = 'fast';
var colomatslideEffect = 'slideFade';
</script>
<script type="text/javascript">jQuery.noConflict();jQuery(function(){jQuery("#gtt_go-to-top a").scrollToTop({speed:1000,ease:"easeOutQuart",start:200});});</script>
<script type="text/javascript">
try{(function(a){myatu_bgm.addTopImage("",function(){if((typeof myatu_bgm!=="undefined")&&(myatu_bgm.initial_ease_in==="true")){a(this).fadeIn("slow")}else{a(this).show()}})}(jQuery))}catch(e){};
</script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.46.0-2013.11.21'></script>
<script type='text/javascript'> 
var _wpcf7 = {"loaderUrl":"http:\/\/test.albuswebdesign.nl\/wordpresstest2\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Verzenden ..."};
</script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.6'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=2.0.20'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.60'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/woocommerce/assets/js/jquery-placeholder/jquery.placeholder.min.js?ver=2.0.20'></script>
<script type='text/javascript'> 
var woocommerce_params = {"countries":"{\"AF\":[],\"AT\":[],\"BE\":[],\"BI\":[],\"CZ\":[],\"DE\":[],\"DK\":[],\"FI\":[],\"FR\":[],\"HU\":[],\"IS\":[],\"IL\":[],\"KR\":[],\"NL\":[],\"NO\":[],\"PL\":[],\"PT\":[],\"SG\":[],\"SK\":[],\"SI\":[],\"LK\":[],\"SE\":[],\"VN\":[],\"AU\":{\"ACT\":\"Australian Capital Territory\",\"NSW\":\"New South Wales\",\"NT\":\"Northern Territory\",\"QLD\":\"Queensland\",\"SA\":\"Zuid-Australi\\u00eb\",\"TAS\":\"Tasmanie\",\"VIC\":\"Victoria\",\"WA\":\"West-Australi\\u00eb\"},\"BR\":{\"AC\":\"Acre\",\"AL\":\"Alagoas\",\"AP\":\"Amap\u00e1\",\"AM\":\"Amazonas\",\"BA\":\"Bahia\",\"CE\":\"Cear\u00e1\",\"DF\":\"Distrito Federal\",\"ES\":\"Espirito Santo\",\"GO\":\"Goi\u00e1s\",\"MA\":\"Maranh\u00e3o\",\"MT\":\"Mato Grosso\",\"MS\":\"Mato Grosso do Sul\",\"MG\":\"Minas Gerais\",\"PA\":\"Par\u00e1\",\"PB\":\"Paran\u00e1\",\"PR\":\"Paran\u00e1\",\"PE\":\"Pernambuco\",\"PI\":\"Piau\u00ed\",\"RJ\":\"Rio de Janeiro\",\"RN\":\"Rio Grande do Norte\",\"RS\":\"Rio Grande do Sul\",\"RO\":\"Rond\u00f4nia\",\"RR\":\"Roraima\",\"SC\":\"Santa Catarina\",\"SP\":\"S\u00e3o Paulo\",\"SE\":\"Sergipe\",\"TO\":\"Tocantins\"},\"CA\":{\"AB\":\"Alberta\",\"BC\":\"British Columbia\",\"MB\":\"Manitoba\",\"NB\":\"New Brunswick\",\"NL\":\"Newfoundland\",\"NT\":\"Northwest Territories\",\"NS\":\"Nova Scotia\",\"NU\":\"Nunavut\",\"ON\":\"Ontario\",\"PE\":\"Prins Edward Eiland\",\"QC\":\"Quebec\",\"SK\":\"Saskatchewan\",\"YT\":\"Yukon Territory\"},\"CN\":{\"CN1\":\"Yunnan \\\/ \u4e91\u5357\",\"CN2\":\"Beijing \\\/ \u5317\u4eac\",\"CN3\":\"Tianjin \\\/ \u5929\u6d25\",\"CN4\":\"Hebei \\\/ \u6cb3\u5317\",\"CN5\":\"Shanxi \\\/ \u5c71\u897f\",\"CN6\":\"Inner Mongolia \\\/ \u5167\u8499\u53e4\",\"CN7\":\"Liaoning \\\/ \u8fbd\u5b81\",\"CN8\":\"Jilin \\\/ \u5409\u6797\",\"CN9\":\"Heilongjiang \\\/ \u9ed1\u9f99\u6c5f\",\"CN10\":\"Shanghai \\\/ \u4e0a\u6d77\",\"CN11\":\"Jiangsu \\\/ \u6c5f\u82cf\",\"CN12\":\"Zhejiang \\\/ \u6d59\u6c5f\",\"CN13\":\"Anhui \\\/ \u5b89\u5fbd\",\"CN14\":\"Fujian \\\/ \u798f\u5efa\",\"CN15\":\"Jiangxi \\\/ \u6c5f\u897f\",\"CN16\":\"Shandong \\\/ \u5c71\u4e1c\",\"CN17\":\"Henan \\\/ \u6cb3\u5357\",\"CN18\":\"Hubei \\\/ \u6e56\u5317\",\"CN19\":\"Hunan \\\/ \u6e56\u5357\",\"CN20\":\"Guangdong \\\/ \u5e7f\u4e1c\",\"CN21\":\"Guangxi Zhuang \\\/ \u5e7f\u897f\u58ee\u65cf\",\"CN22\":\"Hainan \\\/ \u6d77\u5357\",\"CN23\":\"Chongqing \\\/ \u91cd\u5e86\",\"CN24\":\"Sichuan \\\/ \u56db\u5ddd\",\"CN25\":\"Guizhou \\\/ \u8d35\u5dde\",\"CN26\":\"Shaanxi \\\/ \u9655\u897f\",\"CN27\":\"Gansu \\\/ \u7518\u8083\",\"CN28\":\"Qinghai \\\/ \u9752\u6d77\",\"CN29\":\"Ningxia Hui \\\/ \u5b81\u590f\",\"CN30\":\"Macau \\\/ \u6fb3\u95e8\",\"CN31\":\"Tibet \\\/ \u897f\u85cf\",\"CN32\":\"Xinjiang \\\/ \u65b0\u7586\"},\"HK\":{\"HONG KONG\":\"Hong Kong Island\",\"KOWLOON\":\"Kowloon\",\"NEW TERRITORIES\":\"New Territories\"},\"IN\":{\"AP\":\"Andra Pradesh\",\"AR\":\"Arunachal Pradesh\",\"AS\":\"Assam\",\"BR\":\"Bihar\",\"CT\":\"Chhattisgarh\",\"GA\":\"Goa\",\"GJ\":\"Karnataka\",\"HR\":\"Haryana\",\"HP\":\"Himachal Pradesh\",\"JK\":\"Jammu and Kashmir\",\"JH\":\"Jharkhand\",\"KA\":\"Karnataka\",\"KL\":\"Kerala\",\"MP\":\"Madhya Pradesh\",\"MH\":\"Maharashtra\",\"MN\":\"Manipur\",\"ML\":\"Meghalaya\",\"MZ\":\"Mizoram\",\"NL\":\"Nagaland\",\"OR\":\"Orissa\",\"PB\":\"Punjab\",\"RJ\":\"Rajasthan\",\"SK\":\"Sikkim\",\"TN\":\"Tamil Nadu\",\"TR\":\"Tripura\",\"UT\":\"Uttaranchal\",\"UP\":\"Uttar Pradesh\",\"WB\":\"West Bengal\",\"AN\":\"Andaman and Nicobar Islands\",\"CH\":\"Chandigarh\",\"DN\":\"Dadar and Nagar Haveli\",\"DD\":\"Daman and Diu\",\"DL\":\"Delhi\",\"LD\":\"Lakshadeep\",\"PY\":\"Pondicherry (Puducherry)\"},\"ID\":{\"AC\":\"Daerah Istimewa Aceh\",\"SU\":\"Sumatera Utara\",\"SB\":\"Sumatera Barat\",\"RI\":\"Riau\",\"KR\":\"Kepulauan Riau\",\"JA\":\"Jambi\",\"SS\":\"Sumatera Selatan\",\"BB\":\"Bangka Belitung\",\"BE\":\"Bengkulu\",\"LA\":\"Lampung\",\"JK\":\"DKI Jakarta\",\"JB\":\"Jawa Barat\",\"BT\":\"Banten\",\"JT\":\"Jawa Tengah\",\"JI\":\"Java Timur\",\"YO\":\"Daerah Istimewa Yogyakarta\",\"BA\":\"Bali\",\"NB\":\"Nusa Tenggara Barat\",\"NT\":\"Nusa Tenggara Timur\",\"KB\":\"Kalimantan Barat\",\"KT\":\"Kalimantan Tengah\",\"KI\":\"Kalimantan Timur\",\"KS\":\"Kalimantan Selatan\",\"KU\":\"Kalimantan Utara\",\"SA\":\"Sulawesi Utara\",\"ST\":\"Sulawesi Tengah\",\"SG\":\"Sulawesi Tenggara\",\"SR\":\"Sulawesi Barat\",\"SN\":\"Sulawesi Selatan\",\"GO\":\"Gorontalo\",\"MA\":\"Maluku\",\"MU\":\"Maluku Utara\",\"PA\":\"Papua\",\"PB\":\"Papua Barat\"},\"MY\":{\"JHR\":\"Johor\",\"KDH\":\"Kedah\",\"KTN\":\"Kelantan\",\"MLK\":\"Johor\",\"NSN\":\"Negeri Sembilan\",\"PHG\":\"Pahang\",\"PRK\":\"Perak\",\"PLS\":\"Perlis\",\"PNG\":\"Pulau Pinang\",\"SBH\":\"Sabah\",\"SWK\":\"Sarawak\",\"SGR\":\"Selangor\",\"TRG\":\"Terengganu\",\"KUL\":\"W.P. Kuala Lumpur\",\"LBN\":\"W.P. Labuan\",\"PJY\":\"W.P. Putrajaya\"},\"NZ\":{\"NL\":\"Northland\",\"AK\":\"Auckland\",\"WA\":\"Waikato\",\"BP\":\"Bay of Plenty\",\"TK\":\"Taranaki\",\"HB\":\"Hawke\u2019s Bay\",\"MW\":\"Manawatu-Wanganui\",\"WE\":\"Wellington\",\"NS\":\"Nelson\",\"MB\":\"Marlborough\",\"TM\":\"Tasmani\\u00eb\",\"WC\":\"West Coast\",\"CT\":\"Canterbury\",\"OT\":\"Otago\",\"SL\":\"Southland\"},\"ES\":{\"C\":\"A Coru\u00f1a\",\"VI\":\"\u00c1lava\",\"AB\":\"Albacete\",\"A\":\"Alicante\",\"AL\":\"Almer\u00eda\",\"O\":\"Asturias\",\"AV\":\"\u00c1vila\",\"BA\":\"Badajoz\",\"PM\":\"Baleares\",\"B\":\"Barcelona\",\"BU\":\"Burgos\",\"CC\":\"C\u00e1ceres\",\"CA\":\"C\u00e1diz\",\"S\":\"Cantabria\",\"CS\":\"Castell\u00f3n\",\"CE\":\"Ceuta\",\"CR\":\"Ciudad Real\",\"CO\":\"C\u00f3rdoba\",\"CU\":\"Cuenca\",\"GI\":\"Girona\",\"GR\":\"Granada\",\"GU\":\"Guadalajara\",\"SS\":\"Guip\u00fazcoa\",\"H\":\"Huelva\",\"HU\":\"Huesca\",\"J\":\"Ja\u00e9n\",\"LO\":\"La Rioja\",\"GC\":\"Las Palmas\",\"LE\":\"Le\u00f3n\",\"L\":\"Lleida\",\"LU\":\"Lugo\",\"M\":\"Madrid\",\"MA\":\"M\u00e1laga\",\"ML\":\"Melilla\",\"MU\":\"Murcia\",\"NA\":\"Navarra\",\"OR\":\"Ourense\",\"P\":\"Palencia\",\"PO\":\"Pontevedra\",\"SA\":\"Salamanca\",\"TF\":\"Santa Cruz de Tenerife\",\"SG\":\"Segovia\",\"SE\":\"Sevilla\",\"SO\":\"Soria\",\"T\":\"Tarragona\",\"TE\":\"Teruel\",\"TO\":\"Toledo\",\"V\":\"Valencia\",\"VA\":\"Valladolid\",\"BI\":\"Vizcaya\",\"ZA\":\"Zamora\",\"Z\":\"Zaragoza\"},\"TH\":{\"TH-37\":\"Amnat Charoen (\u0e2d\u0e33\u0e19\u0e32\u0e08\u0e40\u0e08\u0e23\u0e34\u0e0d)\",\"TH-15\":\"Ang Thong (\u0e2d\u0e48\u0e32\u0e07\u0e17\u0e2d\u0e07)\",\"TH-14\":\"Ayutthaya (\u0e1e\u0e23\u0e30\u0e19\u0e04\u0e23\u0e28\u0e23\u0e35\u0e2d\u0e22\u0e38\u0e18\u0e22\u0e32)\",\"TH-10\":\"Bangkok (\u0e01\u0e23\u0e38\u0e07\u0e40\u0e17\u0e1e\u0e21\u0e2b\u0e32\u0e19\u0e04\u0e23)\",\"TH-38\":\"Bueng Kan (\u0e1a\u0e36\u0e07\u0e01\u0e32\u0e2c)\",\"TH-31\":\"Buri Ram (\u0e1a\u0e38\u0e23\u0e35\u0e23\u0e31\u0e21\u0e22\u0e4c)\",\"TH-24\":\"Chachoengsao (\u0e09\u0e30\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e17\u0e23\u0e32)\",\"TH-18\":\"Chai Nat (\u0e0a\u0e31\u0e22\u0e19\u0e32\u0e17)\",\"TH-36\":\"Chaiyaphum (\u0e0a\u0e31\u0e22\u0e20\u0e39\u0e21\u0e34)\",\"TH-22\":\"Chanthaburi (\u0e08\u0e31\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35)\",\"TH-50\":\"Chiang Mai (\u0e40\u0e0a\u0e35\u0e22\u0e07\u0e43\u0e2b\u0e21\u0e48)\",\"TH-57\":\"Chiang Rai (\u0e40\u0e0a\u0e35\u0e22\u0e07\u0e23\u0e32\u0e22)\",\"TH-20\":\"Chonburi (\u0e0a\u0e25\u0e1a\u0e38\u0e23\u0e35)\",\"TH-86\":\"Chumphon (\u0e0a\u0e38\u0e21\u0e1e\u0e23)\",\"TH-46\":\"Kalasin (\u0e01\u0e32\u0e2c\u0e2a\u0e34\u0e19\u0e18\u0e38\u0e4c)\",\"TH-62\":\"Kamphaeng Phet (\u0e01\u0e33\u0e41\u0e1e\u0e07\u0e40\u0e1e\u0e0a\u0e23)\",\"TH-71\":\"Kanchanaburi (\u0e01\u0e32\u0e0d\u0e08\u0e19\u0e1a\u0e38\u0e23\u0e35)\",\"TH-40\":\"Khon Kaen (\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19)\",\"TH-81\":\"Krabi (\u0e01\u0e23\u0e30\u0e1a\u0e35\u0e48)\",\"TH-52\":\"Lampang (\u0e25\u0e33\u0e1b\u0e32\u0e07)\",\"TH-51\":\"Lamphun (\u0e25\u0e33\u0e1e\u0e39\u0e19)\",\"TH-42\":\"Loei (\u0e40\u0e25\u0e22)\",\"TH-16\":\"Lopburi (\u0e25\u0e1e\u0e1a\u0e38\u0e23\u0e35)\",\"TH-58\":\"Mae Hong Son (\u0e41\u0e21\u0e48\u0e2e\u0e48\u0e2d\u0e07\u0e2a\u0e2d\u0e19)\",\"TH-44\":\"Maha Sarakham (\u0e21\u0e2b\u0e32\u0e2a\u0e32\u0e23\u0e04\u0e32\u0e21)\",\"TH-49\":\"Mukdahan (\u0e21\u0e38\u0e01\u0e14\u0e32\u0e2b\u0e32\u0e23)\",\"TH-26\":\"Nakhon Nayok (\u0e19\u0e04\u0e23\u0e19\u0e32\u0e22\u0e01)\",\"TH-73\":\"Nakhon Pathom (\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21)\",\"TH-48\":\"Nakhon Phanom (\u0e19\u0e04\u0e23\u0e1e\u0e19\u0e21)\",\"TH-30\":\"Nakhon Ratchasima (\u0e19\u0e04\u0e23\u0e23\u0e32\u0e0a\u0e2a\u0e35\u0e21\u0e32)\",\"TH-60\":\"Nakhon Sawan (\u0e19\u0e04\u0e23\u0e2a\u0e27\u0e23\u0e23\u0e04\u0e4c)\",\"TH-80\":\"Nakhon Si Thammarat (\u0e19\u0e04\u0e23\u0e28\u0e23\u0e35\u0e18\u0e23\u0e23\u0e21\u0e23\u0e32\u0e0a)\",\"TH-55\":\"Nan (\u0e19\u0e48\u0e32\u0e19)\",\"TH-96\":\"Narathiwat (\u0e19\u0e23\u0e32\u0e18\u0e34\u0e27\u0e32\u0e2a)\",\"TH-39\":\"Nong Bua Lam Phu (\u0e2b\u0e19\u0e2d\u0e07\u0e1a\u0e31\u0e27\u0e25\u0e33\u0e20\u0e39)\",\"TH-43\":\"Nong Khai (\u0e2b\u0e19\u0e2d\u0e07\u0e04\u0e32\u0e22)\",\"TH-12\":\"Nonthaburi (\u0e19\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35)\",\"TH-13\":\"Pathum Thani (\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35)\",\"TH-94\":\"Pattani (\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35)\",\"TH-82\":\"Phang Nga (\u0e1e\u0e31\u0e07\u0e07\u0e32)\",\"TH-93\":\"Phatthalung (\u0e1e\u0e31\u0e17\u0e25\u0e38\u0e07)\",\"TH-56\":\"Phayao (\u0e1e\u0e30\u0e40\u0e22\u0e32)\",\"TH-67\":\"Phetchabun (\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e39\u0e23\u0e13\u0e4c)\",\"TH-76\":\"Phetchaburi (\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35)\",\"TH-66\":\"Phichit (\u0e1e\u0e34\u0e08\u0e34\u0e15\u0e23)\",\"TH-65\":\"Phitsanulok (\u0e1e\u0e34\u0e29\u0e13\u0e38\u0e42\u0e25\u0e01)\",\"TH-54\":\"Phrae (\u0e41\u0e1e\u0e23\u0e48)\",\"TH-83\":\"Phuket (\u0e20\u0e39\u0e40\u0e01\u0e47\u0e15)\",\"TH-25\":\"Prachin Buri (\u0e1b\u0e23\u0e32\u0e08\u0e35\u0e19\u0e1a\u0e38\u0e23\u0e35)\",\"TH-77\":\"Prachuap Khiri Khan (\u0e1b\u0e23\u0e30\u0e08\u0e27\u0e1a\u0e04\u0e35\u0e23\u0e35\u0e02\u0e31\u0e19\u0e18\u0e4c)\",\"TH-85\":\"Ranong (\u0e23\u0e30\u0e19\u0e2d\u0e07)\",\"TH-70\":\"Ratchaburi (\u0e23\u0e32\u0e0a\u0e1a\u0e38\u0e23\u0e35)\",\"TH-21\":\"Rayong (\u0e23\u0e30\u0e22\u0e2d\u0e07)\",\"TH-45\":\"Roi Et (\u0e23\u0e49\u0e2d\u0e22\u0e40\u0e2d\u0e47\u0e14)\",\"TH-27\":\"Sa Kaeo (\u0e2a\u0e23\u0e30\u0e41\u0e01\u0e49\u0e27)\",\"TH-47\":\"Sakon Nakhon (\u0e2a\u0e01\u0e25\u0e19\u0e04\u0e23)\",\"TH-11\":\"Samut Prakan (\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e1b\u0e23\u0e32\u0e01\u0e32\u0e23)\",\"TH-74\":\"Samut Sakhon (\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23)\",\"TH-75\":\"Samut Songkhram (\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e07\u0e04\u0e23\u0e32\u0e21)\",\"TH-19\":\"Saraburi (\u0e2a\u0e23\u0e30\u0e1a\u0e38\u0e23\u0e35)\",\"TH-91\":\"Satun (\u0e2a\u0e15\u0e39\u0e25)\",\"TH-17\":\"Sing Buri (\u0e2a\u0e34\u0e07\u0e2b\u0e4c\u0e1a\u0e38\u0e23\u0e35)\",\"TH-33\":\"Sisaket (\u0e28\u0e23\u0e35\u0e2a\u0e30\u0e40\u0e01\u0e29)\",\"TH-90\":\"Songkhla (\u0e2a\u0e07\u0e02\u0e25\u0e32)\",\"TH-64\":\"Sukhothai (\u0e2a\u0e38\u0e42\u0e02\u0e17\u0e31\u0e22)\",\"TH-72\":\"Suphan Buri (\u0e2a\u0e38\u0e1e\u0e23\u0e23\u0e13\u0e1a\u0e38\u0e23\u0e35)\",\"TH-84\":\"Surat Thani (\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35)\",\"TH-32\":\"Surin (\u0e2a\u0e38\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c)\",\"TH-63\":\"Tak (\u0e15\u0e32\u0e01)\",\"TH-92\":\"Trang (\u0e15\u0e23\u0e31\u0e07)\",\"TH-23\":\"Trat (\u0e15\u0e23\u0e32\u0e14)\",\"TH-34\":\"Ubon Ratchathani (\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35)\",\"TH-41\":\"Udon Thani (\u0e2d\u0e38\u0e14\u0e23\u0e18\u0e32\u0e19\u0e35)\",\"TH-61\":\"Uthai Thani (\u0e2d\u0e38\u0e17\u0e31\u0e22\u0e18\u0e32\u0e19\u0e35)\",\"TH-53\":\"Uttaradit (\u0e2d\u0e38\u0e15\u0e23\u0e14\u0e34\u0e15\u0e16\u0e4c)\",\"TH-95\":\"Yala (\u0e22\u0e30\u0e25\u0e32)\",\"TH-35\":\"Yasothon (\u0e22\u0e42\u0e2a\u0e18\u0e23)\"},\"US\":{\"AL\":\"Alabama\",\"AK\":\"Alaska\",\"AZ\":\"Arizona\",\"AR\":\"Arkansas\",\"CA\":\"California\",\"CO\":\"Colorado\",\"CT\":\"Connecticut\",\"DE\":\"Delaware\",\"DC\":\"District Of Columbia\",\"FL\":\"Florida\",\"GA\":\"Georgi\\u00eb\",\"HI\":\"Hawai\",\"ID\":\"Idaho\",\"IL\":\"Illinois\",\"IN\":\"Indiana\",\"IA\":\"Iowa\",\"KS\":\"Kansas\",\"KY\":\"Kentucky\",\"LA\":\"Louisiana\",\"ME\":\"Maine\",\"MD\":\"Maryland\",\"MA\":\"Massachusetts\",\"MI\":\"Michigan\",\"MN\":\"Minnesota\",\"MS\":\"Mississippi\",\"MO\":\"Missouri\",\"MT\":\"Montana\",\"NE\":\"Nebraska\",\"NV\":\"Nevada\",\"NH\":\"New Hampshire\",\"NJ\":\"New Jersey\",\"NM\":\"New Mexico\",\"NY\":\"New York\",\"NC\":\"North Carolina\",\"ND\":\"North Dakota\",\"OH\":\"Ohio\",\"OK\":\"Oklahoma\",\"OR\":\"Oregon\",\"PA\":\"Pennsylvania\",\"RI\":\"Rhode Island\",\"SC\":\"South Carolina\",\"SD\":\"South Dakota\",\"TN\":\"Tennessee\",\"TX\":\"Texas\",\"UT\":\"Utah\",\"VT\":\"Vermont\",\"VA\":\"Virginia\",\"WA\":\"Washington\",\"WV\":\"West Virginia\",\"WI\":\"Wisconsin\",\"WY\":\"Wyoming\",\"AA\":\"Armed Forces (AA)\",\"AE\":\"Armed Forces (AE)\",\"AP\":\"Armed Forces (AP)\",\"AS\":\"Amerikaans Samoa\",\"GU\":\"Guam\",\"MP\":\"Northern Mariana Eilanden\",\"PR\":\"Puerto Rico\",\"UM\":\"Amerikaanse Kleine afgelegen eilanden\",\"VI\":\"Amerikaanse Maagdeneilanden\"},\"ZA\":{\"EC\":\"Eastern Cape\",\"FS\":\"Vrije Staat\",\"GP\":\"Gauteng\",\"KZN\":\"KwaZulu-Natal\",\"LP\":\"Limpopo\",\"MP\":\"Mpumalanga\",\"NC\":\"Noord Kaap\",\"NW\":\"Noord West\",\"WC\":\"West Kaap\"}}","plugin_url":"http:\/\/test.albuswebdesign.nl\/wordpresstest2\/wp-content\/plugins\/woocommerce","ajax_url":"\/wordpresstest2\/wp-admin\/admin-ajax.php","ajax_loader_url":"http:\/\/test.albuswebdesign.nl\/wordpresstest2\/wp-content\/plugins\/woocommerce\/assets\/images\/ajax-loader@2x.gif","i18n_select_state_text":"Select an option\u2026","i18n_required_rating_text":"Please select a rating","i18n_no_matching_variations_text":"Sorry, no products matched your selection. Please choose a different combination.","i18n_required_text":"required","i18n_view_cart":"Bekijk Winkelwagen \u2192","review_rating_required":"yes","update_order_review_nonce":"4c513a804b","apply_coupon_nonce":"368339d3ab","option_guest_checkout":"yes","checkout_url":"\/wordpresstest2\/wp-admin\/admin-ajax.php?action=woocommerce-checkout","is_checkout":"0","update_shipping_method_nonce":"06898a7f1a","cart_url":"http:\/\/test.albuswebdesign.nl\/wordpresstest2\/winkelwagen\/","cart_redirect_after_add":"no"};
</script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=2.0.20'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js?ver=1.3.1'></script>
<script type='text/javascript' src='http://test.albuswebdesign.nl/wordpresstest2/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=2.0.20'></script>
.
 
Laatst bewerkt:
Hoi Bron, ik heb het menu en de css erbij in een html/css bestand gezet en dan werkt klikken niet. Ik heb het op een kale WordPress versie getest en dan werkt het wel. Ligt niet aan een plug-in maar aan WordPress dat ik geluk heb :)
Ik vond overigens wel iemand die het met css voor mekaar heeft gekregen (zie hier) maar dat gaat mij wat boven mijn pet.
Ik ga nu het menu zo proberen om te bouwen dat het framework erin is gezet, wordt nog een klus.

Graag nog 1 ding; je toevoeging bij punt 3 ( menu aan de rechterkant wat naar links uitklapt ) die probeerde ik om te bouwen naar "menu aan linkerkant wat naar rechts uitklapt" maar dat lukt me niet. Wil je tip geven?

Super!
 
Natuurlijk gelijk dit menu getest, het zag er in de uitleg veelbelovend uit, maar helaas.... Nadat ik alle overbodige html eruit had gehaald bleek dat het niet werkt zonder de volgende scripts: <body onclick="this.className=this.className">
en: html { behavior:url(trigger2.htc) }
Maar de opzet van dit menu ziet er wel goed uit.
 
Hi , nog even deze post terug gezocht.
Als je het menu op tablets/phones wil laten werken is dit nodig.
Code: 
<li><span class="menu-item-has-children">JE TEKST</span>
  <ul>
    <li>......</li>
  </ul>
</li>
De <span> maak je even groot als de <a>
 
Ha Bron, dank je voor je update :thumb:, ik wilde je zelf al vandaag een bericht sturen want heb je menu nu kunnen toepassen bij deze test website.
Ik stap af van het onclick gedeelte, ik vind het teveel een gedoe en het werkt gewoon regelmatig niet goed.

Bij deze WordPress website heb ik nu een mooi kaal developers framework gebruikt want die geeft niet zoveel rommel dan je bij de vorige site zag. Ik heb bijna je gehele menu kunnen gebruiken en werkt bijna goed.
Wat ik nog niet goed voor mekaar krijg is dat als ik van bijv. products naar subitems ga met de muis dan blijft support tijdens dit proces niet juiste kleur en al helemaal niet als ik een subitem heb aangeklikt.

Je laatste opmerking wat je gisteren postte weet ik niet precies waar die thuis hoort. :o

Groet!
 
Oh, bij je framework voor verticaal menu heb ik het zo goed aangepast voor menu uitklapbaar rechts? Het werkt wel overigens ;) De laatste regel heb ik waar left stond en right stond beide omgedraaid :)
Code: 
/* begin gedeelte voor menu verticaal - rechts uitklapbaar */
.menu { float: right; width: 200px; /* breedte menu */ }
.menu li { float: none; text-align: left; }
.menu ul { top: 1px; left: 99%; right: auto !important; }
/* einde gedeelte voor menu verticaal */

oh, aanvulling ik zie wel dat het submenu wat uitklapt (naar links of rechts) 1px omlaag zakt en het 2e submenu ook weer 1px dus dat ziet er niet zo mooi uit. Ik heb die top: 1px veranderd naar 0px en dan gaat het goed. Maar die zal je er voor een reden ingezet hebben; waarom?
 
Laatst bewerkt:
@damnsharp
yep, graag gedaan :cool: :cool:
Ben geen verenigingslid, kon geen reply geven
 
Mooi. Wil je aub nog naar mijn berichtje bij #17 kijken?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan