[Opgelost] dropdown menu werkt niet

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

[Opgelost] dropdown menu werkt niet

Post by rayring »

Beste CMSMS'ers,

Ik ben inmiddels al aardig wat uurtjes bezig om een submenu op mijn site te krijgen.
Ik krijg alleen level 1 te zien en niet de subpagina's. De template (Horizontal_dropdown : EllNav Horiz/Vert L 2col) die ik gebruik heeft meerdere stylesheets waardoor ik ook door de bomen het bos niet meer zie..

Horizontal_dropdown : Tools    
Horizontal_dropdown : Typography    
Horizontal_dropdown : Forms    
Horizontal_dropdown : Layout EllNav H/V L 2Col    
Horizontal_dropdown : Layout    
Horizontal_dropdown : Colours    
Horizontal_dropdown : sort    
Horizontal_dropdown : Nav-Horizontal


Ik heb ook al geprobeerd om het dropdown menu van de default template te gebruiken maar deze gaf de sub menu items steeds uiterst links in beeld aan ongeacht wat ik in de stylesheet wijzigde.

Hieronder mijn sjabloon en stylesheet:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<__html>

<head>
<!--[if IE]>
<__script__ type="text/javascript" src="uploads/Horizontal_dropdown/CSSMenu.js"></__script>
<![endif]-->
<!-- Type the title of your site here -->
<title>Maas Zorgverlening - {title}</title>

{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
<__script__ type="text/javascript" src=uploads/Horizontal_dropdown/sucker.js"></__script
{global_content name='JavaScript for IE page width'}
</head>

</__body>

<div id="pagewrapper">
<div id="container">

    <!-- start accessibility skip links -->
    <ul class="accessibility">
      <li><a href="#menu_vert" accesskey="s" title="Skip to navigation">Skip to navigation</a></li>
      <li>{cms_selflink anchorlink='main' dir='anchor' text='Skip to content'}</li>
    </ul>
    <!-- end accessibility skip links -->

    <hr />


   <!-- Start Header, with logo image that links to the default start page -->
   <div id="header" class="clearfix">
           <h1>{cms_selflink dir="start"}</h1>
   <hr />
   </div>
   <!-- End Header -->


      <!-- Start Horizontal Menu -->
      <div id="menu_horiz">
         <h2 class="accessibility">Main Navigation</h2>
         <div id="wrapper">
         {cms_module module='menumanager' template='Horizontal_dropdown : my_nav'  }
         </div>
      </div><!-- end topnav -->
      <!-- End Horizontal Menu -->

 <!-- Start sub nav -->
   <div class="subnav"></div>
   <!-- End sub nav -->
   

<!-- Start Breadcrumbs -->
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}<br>

<hr />
   </div>
   <!-- End Breadcrumbs -->


   <!-- Start Content (Navigation and Content columns) -->
   <div id="content" class="clearfix">

 <!-- Start Sub Navigation -->
      <!-- <div id="menu_vert">
         <h2 class="accessibility">Sub Navigation</h2>
         {cms_module module='menumanager' template='Horizontal_dropdown : ellnav-accessible'   start_level='2' collapse='1'}
      <hr />
      </div> -->
      <!-- End Sub Navigation -->


      <!-- Start Content Area -->
      <div id="main">

         {content} <br />

         

      
      </div>
      <!-- End Content Area -->


      <!-- Start Second Content Block -->
      <div id="content2">

         {content block='block1'}
<hr>

</p></center>
      </div>
      <!-- End Second Content Block -->


   </div>
   <!-- End Content -->


   <!-- Start Footer -->
   <div id="footer" class="clearfix">
      {global_content name='footer'}
   </div>
   <!-- End Footer -->


</div><!-- end container -->
</div><!-- end pagewrapper -->


<__body>
</__html>
stylesheet:

Code: Select all

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* NAV */

    * html div#menu_horiz {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#menu_horiz {
      width: 781px;
      margin: 0;
      text-align: center;
      border-right: solid 1px #cccccc;
    }
    div#menu_horiz ul {    
        margin: 0;
        padding: 0;
        list-style: none;
        border-left:  px solid #C0C0C0;
        
div#menu_horiz ul li {
      background-color: #000;
       
    }
    div#menu_horiz li {
        float: left;
        display: inline;
        list-style: none;
        margin: 0 ;
        border-right: px solid #C0C0C0;

}


    }
    div#menu_horiz li a {
        border-right: none;
    }
    div#menu_horiz a,
    div#menu_horiz a:link,
    div#menu_horiz a:active,
    div#menu_horiz a:visited {
        display: block;
        padding: 5px 10px; 

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        background:  url(uploads/Horizontal_dropdown/nav_bg.jpg) repeat 0 0px; 
        text-decoration: none;
        margin: 0;
        color: #fff;
        /*background: #F68F3A;*/
         font-weight: bold;
    }
div#menu_horiz li a:hover {
        background:  url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) repeat 0 0px;
	background-color: #D10D40;
        color: #FFF;
        line-height: 1em;
        font-weight: bold;
}
    div#menu_horiz .activeparent {
        display: inline-block;

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        
	background-color: #D10D40;
    }

    div#menu_horiz .current a,
    div#menu_horiz .current a:link,
    div#menu_horiz .current a:active,
    div#menu_horiz .current a:visited,
    div#menu_horiz .current a:hover,
    div#menu_horiz .activeparent a,
    div#menu_horiz .activeparent a:link,
    div#menu_horiz .activeparent a:active,
    div#menu_horiz .activeparent a:visited,
    div#menu_horiz .activeparent a:hover 
{
	background-color: #D10D40;
    }
/* END NAV */

div#menu_horiz li.active01 h3 {
        display: inline-block;
        padding: 5px 10px; 
        background:  url(uploads/Horizontal_dropdown/nav_hover_bg.jpg) repeat 0 0px;
        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        font-size: 1em;
        line-height: 1em;
        text-decoration: none;
        margin: 0;
        color: #ffffff;
        background-color: #D10D40;
    }

#menu_horiz li.active02 h3 {
  display: block;
  text-decoration: none;
  padding: 5px 5px 5px 10px;
  font-weight: normal;
  color: #18507C;
  margin: 0;
  font-size: 1em;
  background-color: #D10D40;
  }

#menu_horiz li.active03 h3
{
  display: block;
  padding: 3px 5px 3px 25px;
  border-bottom: none;
  font-size: 90%;
  font-weight: bold;
  color: #D10D40;
  margin: 0;
}
Alvast bedankt voor het meedenken  ;D
Last edited by rayring on Wed Sep 29, 2010 8:01 am, edited 1 time in total.
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: dropdown menu werkt niet

Post by rayring »

niemand :-[
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

Re: dropdown menu werkt niet

Post by Gregor »

Heb je een linkje naar je site? Kunnen we meekijken en -denken :)

Gregor
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: dropdown menu werkt niet

Post by rayring »

 :D dank alvast!
Last edited by rayring on Wed Sep 29, 2010 8:01 am, edited 1 time in total.
rj
Forum Members
Forum Members
Posts: 70
Joined: Fri Aug 10, 2007 4:58 am

Re: dropdown menu werkt niet

Post by rj »

Ik weet niet of het een optie is maar met onderstaande menu-code heb ik al diverse dropdownmenus op verschillende sites weten te creëren.

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' 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->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext}</span>{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />{else}
<li>
<a {/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><span class="sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}
bijbehorend stijlblad:

Code: Select all

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   background-color: #012650;
   width: 100%;  }

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li { width: 220px; }

#primary-nav, #primary-nav ul, #primary-nav ul ul { z-index: 999;
   list-style: none; 
   margin: 0px; 
   padding: 0px; }

#primary-nav { margin-left: 65px; font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Helvetica, Verdana, sans-serif; }

#primary-nav ul {
   border: 5px solid #275387;
   position: absolute; 
   top: auto; 
   display: none;  }

#primary-nav ul ul { 
   margin-top: -5px;
   margin-left: 0px;
   left: 100%; 
   top: 0px; }
	
#primary-nav li { 
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 6px;
   margin-bottom: 6px;
   float: left; 
   border-right: 1px solid #999589; }

#primary-nav li:last-child { border-right: none; }

#primary-nav li li { 
   margin-left: 0px;
   margin-top: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   float: none; 
   position: relative; 
   border-right: none; }

#primary-nav li li a { text-transform: lowercase; font-size: 13px; font-weight: normal; }

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   padding: 2px 20px; 
   text-decoration: none; 
   font-weight: normal;
   font-size: 12px;
   color: #fff;
   text-transform: uppercase; }

#primary-nav li a { border-right: none; border-left: none; }
#primary-nav li li a { border-bottom: 1px solid #275387; font-weight: normal; padding: 4px 2px 4px 20px; }
#primary-nav li, #primary-nav li.menuparent { background-color: #012650; }

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { font-weight: normal; background-color: #E5232E; }

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; }


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { background-color: #275387; }

#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  */
#primary-nav li li { float: left; clear: both; }
#primary-nav li li a { height: 1%; }


/* section header
====================================*/
#primary-nav .sectionheader { display: none; background: #fff; margin: 0; padding:0; }


/* separator
===================================*/
#primary-nav hr {  margin: 0; padding: 0; border: #fff 2px solid; }


groet,
Richard
Last edited by rj on Fri Oct 01, 2010 7:17 pm, edited 1 time in total.
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: dropdown menu werkt niet

Post by rayring »

@ Richard,

Super bedankt voor de code van jouw menu!!!  ;D ;D ;D
Het werkt uitstekend!!

Groet,

Rayring
rj
Forum Members
Forum Members
Posts: 70
Joined: Fri Aug 10, 2007 4:58 am

Re: [Opgelost] dropdown menu werkt niet

Post by rj »

geen dank  ;D
Post Reply

Return to “Dutch - Nederlands”