Page 1 of 2
Eigen menu maken
Posted: Tue Aug 11, 2009 2:37 pm
by Evert B.
Beste mensen,
Ik wil graag een menu maken voor mijn website, maar helaas net weer anders als de meegeleverde menu's...
Een voorbeeld zie je
hier.
Ik geloof dat het geen optie is om één van de huidge menus om te bouwen. Echter ik heb totaal geen idee hoe ik er voor kan zorgen dat ik niet ergens een hele 'list' in mijn template moet zetten maar gebruik kan maken van CMSMS's mogelijkheid om een list te creeeren van de pagina tree.
Wie weet hoe ik dit kan regelen?
Een ander multilevel CSS horizontaal menu oplossing die gemakkelijker is is ook welkom!
Groeten Nuc
Re: Eigen menu maken
Posted: Tue Aug 11, 2009 2:51 pm
by RonnyK
Je kunt via MenuManager, 1 van de bestaande importeren en vervolgens ombouwen, zodat de list wordt gegenereerd. Vervolgens kun je de stylesheet die bij het voorbeeld van je menu staat overnemen, zodat de elementen gelijk gestyled zijn.
Ronny
Re: Eigen menu maken
Posted: Thu Aug 13, 2009 10:01 pm
by Evert B.
Dankzij mijn frustratie zal mijn vreugde nadat het gelukt is hopelijk groot zijn...!
Ronny weet je toevallig ook waar ik het javascript bestand moet plaatsen. Er staat in op de website in dezelfde map als de stylesheet en de template maar dat werkt niet....? Gewoon in de van het template plakken werkt ook niet.
Of beter een menu zoeken zonder java?
Grtz Nuc
Re: Eigen menu maken
Posted: Fri Aug 14, 2009 12:28 pm
by sander
Beste nucleus,
Je kunt volgens mij het menu volledig CSS-HTML maken, zonder javascript, alleen kun je dan niet het vertraagde effect van uitschuiven voor elkaar krijgen.
Je moet hiervoor in de CSS bij de list-items display:none gebruiken en bij list-items a:hover display: inline...
Zo zal het ongeveer moeten werken..
Succes,
Groet,
Sander Wielemaker
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 8:02 am
by Evert B.
Mensen ik ben een weekje op vakantie geweest maar ben er nu weer mee bezig (site moet snel af...).
Ik gebruik gewoon voor het gemak een menu zonder javascript, enkel CSS.
Ik kan natuurlijk een stylesheet aanmaken met de CSS voor het menu (net zoals de oorspronkelijke menu's van CMSMS) en deze koppelen aan het template van de website. Dat heeft echter bijna geen uitwerking, want het gaat om de templates van het menu, geloof ik.
Ik snap echter niets van die menu templates, en de uiteindelijke code wordt juist daarin aangemaakt.
Ik kan best aardig met CSS en html ov
erweg maar PHP is voor mij nog erg lastig. Wat kan/moet ik nu veranderen in de template van het menu?
Theoretisch dacht ik moet het het simpelst zijn om het minimal_menu.tpl aan te passen dacht ik. Zie hier de code:
Code: Select all
{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}
<ul class="clearfix">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Het enige wat ik wil is een menu met de menuitems horizontaal naast elkaar en dan de submenuitems die er op een nieuwe regel horizontaal onder komen.
Ik kom er niet uit.
Wat is mijn denkfout of wat doe ik fout?!?
Ik krijg mijn CSS van het menu gewoon niet op mijn site.
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 8:52 am
by RonnyK
als je een horizontaal menu wil hebben met uitklap naar beneden, dan kun je beter in de default templates kijken naar de "CSS horizontal menu" template, deze heeft deze logica met bijbehorende css aanwezig. Je hoeft dan alleen de CSS aan te passen. In die template zie je dan ook de call naar het specifieke menu-template ook ziet. Hierdoor weet je welk menu je eventueel kunt aanpassen, maar ik denk dat enkel stylen al voldoende is.
Ronny
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 9:00 am
by Jos
Jouw streven naar
dit menu is niet zo ingewikkeld.
De minimal_menu.tpl genereert namelijk al een unordered list die jouw menu nodig heeft. Er staan hooguit nog wat onnodige classes in zoals class="currentpage" en class="activeparent". Ook kan het zijn dat je menu struikelt over section-headers en separators, aangezien hier geen a element in staan.
Stappen die je nog moet uitvoeren:
1) algemene pagina sjabloon aanpassen met volgende regels in de sectie:
Code: Select all
{literal}
<link rel="stylesheet" type="text/css" href="droplinebar.css" />
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></__script>
<__script__ src="droplinemenu.js" type="text/javascript"></__script>
<__script__ type="text/javascript">
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</__script>
{/literal}
2) downloaden van de bestandjes droplinebar.css en droplinemenu.js
Conform bovenstaande code moet je deze in de root van je site plaatsen.
3) downloaden van de 3 plaatjes (zie 3e bullet)
4) menu in je sjabloon in de plaatsen dmv de volgende code:
Code: Select all
<div id="mydroplinemenu" class="droplinebar">
{menu template='minimalmenu.tpl'}
</div>
Volgens mij moet je dan al een heel eind op weg zijn
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 9:11 am
by Jos
De plaatjes: bluedefault.gif , blueactive.gif en down.gif moeten volgens de code trouwens ook in de root staan.
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 9:53 am
by Evert B.
@ Jos:
ALs ik bovengenoemde stappen uitvoer ben ik denk ik al best een heel eind ja, maar de children zijn niet te zien in het menu. Dus je ziet enkel de MenuItems en als je dan met je muis op een MenuItem gaat staan waar SubMenuItems onder staan komen die dus niet eronder
Zal best aan Java kunnen liggen misschien?
@ Ronny:
Ik zou niets liever willen, echter ik wil dan wel een uitklap naar beneden, maar dan wel op een horizontale regel eronder.
Dus:
Item | Item | Item | Item
SubItem | SubItem | SubItem
Dit zie ik niet in de stylesheet staan of kijk er over heen?
Mannen alvast enorm bedankt tot zover.
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 9:57 am
by Jos
zie je de submenu-items wel als je de html-bron van je site bekijkt?
en: Java ≠ Javascript
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 11:20 am
by Evert B.
Jos ik zie gewoon alle items wel als ik de paginabron bekijk ja, en ook in de dezelfde site met een van de oorspronkelijke CMSMS templates.
En sorrie als ik Javascript uitschold voor Java
Ik zal je wel even mijn URL PM'en, ik weet nooit of het verstandig is dat hier zo te posten.
GrtZ Nucleus
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 11:41 am
by Jos
Ik heb even snel gekeken.
Kan het zijn dat je het bestand droplinemenu.js nog niet in de root van je test website hebt staan?
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 12:25 pm
by Evert B.
Jos wrote:
Kan het zijn dat je het bestand droplinemenu.js nog niet in de root van je test website hebt staan?
Bedankt voor het kijken.
Droplinemenu.js bevind zich in de map 'test' waar ook config.php etc in zit, lijkt mij de goede map toch?
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 2:33 pm
by Jos
Yep, nu kan ik em ook benaderen, kreeg daarstraks een 404.
Kijk eens naar de code:
Code: Select all
<div id=mydroplinemenu" class="droplinebar">
Daar mist een quote bij het id..
ik zie nu dat dat mijn fout was
Re: Eigen menu maken
Posted: Mon Aug 24, 2009 6:15 pm
by Evert B.
Whaha fantatstisch nu ben ik weer een stapje verder na toevoegen van deze bracket, bedankt!.
Echter
: mijn sublevel hangt nu op een vreemde plaats op de pagina, komt er niet gewoon netjes onder.
Voor wie me denkt te kunnen helpen pm me even dan stuur ik je de url en eventuele andere gegevens.
Volgens mij ligt het niet aan dit stylesheet:
Code: Select all
.droplinebar{
overflow: hidden;
}
.droplinebar ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
font: bold 13px Arial;
background: #242c54 url(bluedefault.gif) center center repeat-x; /*default background of menu bar*/
}
.droplinebar ul li{
display: inline;
}
.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}
.droplinebar ul li a:visited{
color: white;
}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(blueactive.gif) center center repeat-x;
}
/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
background: #303c76; /*sub menu background color */
visibility: hidden;
}
/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}
.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #242c54;
}