Horizontaal dropdown menu

[bigbrodesign]

Hoi.

Ik heb de volgende site gemaakt, en hier moet een dropdown menu in komen.
Het submenu moet horizontaal onder het hoofdmenu komen en moet er
hetzelfde uitzien zoals het menu er nu uit ziet.

De site:
http://www.bbta.eu/

Hoe kan ik dit het beste aanpassen..
Heeft iemand hier een een template voor?

[erpee]

Ik zou "gewoon" een horizontaaal menu nemen dat bij één van de voorbeeldtemplates staat.(bijv: 'CSSMenu top + 2 columns')

In de HEAD:

Code: Select all

<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}

Op de plek van het menu:

Code: Select all

      {* Start Navigation *}
      <div id="menu_vert">
         <h2 class="accessibility">Navigation</h2>
         {menu template='cssmenu.tpl'}
      <hr class="accessibility" />
      </div>
      {* End Navigation *}

Neem daar het menu uit en plak het in je eigen template (ook even de juiste css aan je template hangen) Nu moet je alleen die menu CSS nog even aanpassen dat het geheel eruit gaat zien zoals het menu zoals jij wilt ...

Succes 

[bigbrodesign]

Hoi.

Ik heb even op mn eigen server aan het stoeien geweest.
Ik heb het default template gepakt en daar dingen weggestript:
http://www.bigbrodesign.nl/webdesign/

Wat kan ik hier nog meer weg strippen, en hoe krijg ik het submenu (breadcrumbs) horizontaal
uitgelijnd, onder het hoofdmenu?

De menu code:

Code: Select all

/* ------------  Menu  ROOT  ------------ */
.page-menu {
	width: auto;
	height: 35px;
	margin: 3px 0 0 20px;
}
.menuwrapper {}

ul#primary-nav li hr.menu_separator{
        position: relative;
        visibility: hidden;
        display:block;
        width:5px;
       	height: 32px;
       	margin: 0px 5px 0px;
}
.page-menu ul#primary-nav {
	height: 1%;
	float: left;
	list-style: none;
	padding: 0;
	margin: 0;
}
.page-menu ul#primary-nav li {
	float: left;
}
.page-menu ul#primary-nav li a,
.page-menu ul#primary-nav li a span {
	display: block;
	padding: 0 10px;
}
.page-menu ul#primary-nav li a {
	padding-left: 0;
	color: #000;
	text-decoration: none;
	margin-left: 1px;
	font-size: 12px;
}
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:active {
	color: #000;
}
.page-menu ul#primary-nav li a.menuactive,
.page-menu ul#primary-nav li a:hover span {
	color: #000;
}
.page-menu ul#primary-nav li a span {
	padding-top: 6px;
	padding-right: 0;
	padding-bottom: 5px;
}
.page-menu ul#primary-nav li a.menuparenth,
.page-menu ul#primary-nav li a.menuactive,
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:focus,
.page-menu ul#primary-nav li a:active {
	background-position: 100% -120px;
}
.page-menu ul#primary-nav li a {
	background-position: 100% -80px;
}
.page-menu ul#primary-nav li a.menuactive span,
.page-menu ul#primary-nav li a:hover span,
.page-menu ul#primary-nav li a:focus span,
.page-menu ul#primary-nav li a:active span {
	background-position: 0 -40px;
}
.page-menu ul#primary-nav li a span {
	background-position: 0 0;
}
.page-menu ul#primary-nav .sectionheader,
.page-menu ul#primary-nav li a:link.menuactive,
.page-menu ul#primary-nav li a:visited.menuactive {
/* @ Opera, use pseudo classes otherwise it confuses cursor... */
	cursor: text;
}
.page-menu ul#primary-nav li span,
.page-menu ul#primary-nav li a,
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:focus,
.page-menu ul#primary-nav li a:active {
/* @ Opera, we need to be explicit again here now... */
	cursor: pointer;
}
/* Additional IE specific bug fixes... */
* html .page-menu ul#primary-nav {
	display: inline-block;
}
*:first-child+html .page-menu ul#primary-nav {
	display: inline-block;
}

li {
display:inline; list-style-type:none; border-left:1px solid #FFF
}
li:first-child {
border-left:none
}

/* --------------------  menu dropdow  -------------------------
/* Unless you know what you do, do not touch this */
/* Reset all ROOT menu styles. */
ul#primary-nav ul.unli li li a span,
ul#primary-nav ul.unli li a span,
ul#primary-nav .menuparent .unli .menuparent .unli li a span {
	font-weight: normal;
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
#primary-nav {
	margin: 0px;
	padding: 0px;
}
#primary-nav ul {
	list-style: none;
	margin: -6px 0px 0px;
	padding: 0px;
/* Set the width of the menu elements at second level. Leaving first level flexible. (standard: 209px) */
	width: auto;
}
#primary-nav ul {
	position: absolute;
	z-index: 1001;
	top: auto;
	display: none;
	padding-top: 9px;
}
* html #primary-nav ul.unli {
	padding-top: 12px;
}
#primary-nav ul.unli ul {
	margin-left: -7px;
	left: 100%;
	top: 3px;
}
* html #primary-nav ul.unli ul {
	margin-left: -0px;
}
#primary-nav li {
	margin: 0px;
	float: left;
}
#primary-nav li li {
	margin-left: 7px;
	margin-top: -1px;
	float: left;
}
#primary-nav ul.unli li a {
	padding: 0px 10px;
	width: 165px;
	margin: 5px;
	background-image: none;
}
* html #primary-nav ul.unli li a {
	padding: 0px 10px 0px 5px;
	width: 165px;
	margin: 5px 0px;
}
#primary-nav li li a:hover {
}
/* Styling the basic appearance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive li a {
	text-decoration: none;
	background: none;
}
#primary-nav ul.unli li.menuparenth,
#primary-nav ul.unli a:hover,
#primary-nav ul.unli a.menuactive {
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul.unli li .menuparent,
#primary-nav ul.unli li .menuparent:hover,
#primary-nav ul.unli li .menuparent,
#primary-nav .menuactive.menuparent .unli .menuactive.menuparent .menuactive.menuparent {
	background-position: center right;
	background-repeat: no-repeat;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul,
#primary-nav li.menuparenth ul ul ul {
	display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav ul ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul,
#primary-nav ul ul ul li.menuparenth ul {
	display: block;
}
/* IE Hacks */
#primary-nav li li {
	float: left;
	clear: both;
}
#primary-nav li li a {
	height: 1%;
}
/*************** End Menu *****************/

[bigbrodesign]

Iemand?

[Rolf]

Het submenu moet horizontaal onder het hoofdmenu komen en moet er hetzelfde uitzien zoals het menu er nu uit ziet.

Dit is eens hier op het NL forum aan de orde geweest...  Problemen met de verschillende browsers geloof ik.
Kan het zo niet vinden, wellicht zelf ook nog eens zoeken

grt. Rolf

[bigbrodesign]

Hoi..
Ik heb al wat gezocht maar ik kan het nog niet vinden.
Is er een simpele code die ik toe kan voegen zodat hij horizontaal word?
Ik bedoel dus het submenu (breadcrumbs)

[bigbrodesign]

Ik kom er nog steeds niet uit..

Het gaat om deze website, waar ik het menu aan het uitproberen ben
waarna ik hem in een andere site kan toevoegen:

http://www.bigbrodesign.nl/webdesign/

Ik heb hier en daar al geprobeerd met float left etc.
maar het werkt nog niet echt.

[M@rtijn]

Misschien werkt een display="inline" op de ul?

[bigbrodesign]

Mmm nee weinig succes.

[brentnl]

haal die clear:both is weg van #primary-nav li li .

[bigbrodesign]

Ik weet niet of dit heel dom is.. maar het werkt nog steeds niet.
Het dropdown menu staat nog steeds verticaal onder elkaar ipv. horizontaal naast elkaar.

[brentnl]

Ik weet niet of dit heel dom is.. maar het werkt nog steeds niet.
Het dropdown menu staat nog steeds verticaal onder elkaar ipv. horizontaal naast elkaar.

In deze CSS file moet je even uit dit stukje 'clear: both' weghalen.

Code: Select all

/* IE Hacks */
#primary-nav li li {
	float: left;
	clear: both;
}

[bigbrodesign]

Waaw!
Het werkt!
Dankje dankje dankje!

Nu moet ik dit menu alleen overzetten naar de volgende site:
www.bbta.eu

Dit zal hopenlijk niet zo'n groot probleem zijn, aangzien ik gewoon kan kopieren plakken,
maar ik juich nog niet te vroeg.