[solved] Is there any tutorial on how to create menu template?

[angelam]

Hello,


Can any one help me on how to convert this menu to cmsmadesimple menu?
http://www.javascriptkit.com/script/scr ... menu.shtml

thanks in advance
angela

[Dr.CSS]

Take the images and use them for the CSSMenu vertical that comes with CMSMS, like this one that comes with it...

http://cmsmsdemo.multiintech.com/index. ... tical  look at home page for login info...

[angelam]

I'm sorry, can you give more information on how to add or what part to be change? Actually I have my own template structure of the page, my problem is the menu part and how to integrate cmsms menu like http://cmsmsdemo.multiintech.com/index. ... u_vertical. if you can give steps of instructions what to do would be very much appreciated.

thank you mark

[Dr.CSS]

OK, you have a template so where you want the menu add {menu template="cssmenu.tpl"} then for your CSS attach a copy of the CMSMS style sheet 'Navigation: CSSMenu - Vertical' then for style change these values to your taste, you will note the h on the end of some of the style calls this is from the IE6 or less JS that you will need to add to the of your template if you are not reworking one of the default ones...

If you use default templates or style sheets always make copies of whatever you want to change be it a template or style sheet by going to Layout » Templates or Layout » Stylesheets and clicking the dbl. paper icon to the right, name it, submit, then attach it, CSS that is...

#primary-nav a {  the main sizing and color for the list links, if you want more colors or control of the children pages you can add #primary-nav li li a {your stle here} below this...
  border: 1px solid #006699;
  display: block;
  margin: 0px;
  padding: 5px 10px;
  color: #006699;
  text-decoration: none;
  background: transparent;
  min-height:1em; /* Fixes IE7 whitespace bug*/
}
#primary-nav li, #primary-nav li.menuparent {  the basic grey background color of the menu, if you want a diff. color for a top level parent page that is not active or has any active child under it take out the "#primary-nav li.menuparent" and give it it's own color/style, if you do make sure not to leave the , at the end of #primary-nav li ...
  background-color: #ececec;
  min-height:1em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */  the style of the page you are on also if the page is a child of a top level page the top level page will have this color, like the page on the demo site the menu shows this color for Default Templates Explained and it's active child page CSSMenu left + 1 column
#primary-nav li.menuactive {
  background-color: #C7C7C7;
}

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


/* Styling the apperance of menu items on hover */  anything in the menu that gets moused over
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #E7AB0B;
}

Also if you want to make the second level menu a set size when it flies out add, mostly used for the horizontal menu...

#primary-nav li li {width: ###px} your size in pixals...

Does that help?...