How to get the dropdown menu created with artisteer work?

[Tysilflyfisher]

I have made a new template with Artisteer. On the template I created a menubar with dropdown menu, but i cant create any "sub menues" that drop down.

Any one that could help a lost novice?

[justin7542]

I have the same issue If you are able to resolve it, I would really like to know. And I am working on it as we speak so vice versa if I find a solution!

[audraoc]

Make sure that in in your main_menu module parameters, "always show submenu items" is set to "yes"

[justin7542]

Thanks, that's what It was for me. I thought I checked that already but I must have selected the wrong menu module.

[MechtaDesign]

Hi guys, I have the same problem. I've created a template with Artisteer 2 for my website, and have set the parameter in the main menu module, and the links that are suppose to drop down any time the mouse is over the TUTORIAL link, and it does not. Anyone know what the problem is?... what are my options?...

here is the url: http://online.mechtadesign.com

please excuse the mess, it's still a work of progress...

thank you in advance.

-Alex

[audraoc]

Hi guys, I have the same problem. I've created a template with Artisteer 2 for my website, and have set the parameter in the main menu module, and the links that are suppose to drop down any time the mouse is over the TUTORIAL link, and it does not. Anyone know what the problem is?... what are my options?...

here is the url: http://online.mechtadesign.com

please excuse the mess, it's still a work of progress...

thank you in advance.

-Alex

Make sure, when making template in Artisteer, select dropdown submenu option - it's easy to overlook.

[MechtaDesign]

Hi guys, I have the same problem. I've created a template with Artisteer 2 for my website, and have set the parameter in the main menu module, and the links that are suppose to drop down any time the mouse is over the TUTORIAL link, and it does not. Anyone know what the problem is?... what are my options?...

here is the url: http://online.mechtadesign.com

please excuse the mess, it's still a work of progress...

thank you in advance.

-Alex

Make sure, when making template in Artisteer, select dropdown submenu option - it's easy to overlook.

I don't understand, where do I select the drop down sub menu option...

This is what I did, Menu > Top Menu > New (Articles) > Category > Category Blog Layout

created file: Joomla Tutorials

Parameters Basic: Selected Category > FAQ/General
Selected the parent item: in my case would be Tutorials link in the top menu.

and saved it.

Now, when it brings me back to Menu Item Manager: [topmenu]

I can see it as a sub link to the tutorials link... but when I on the front page, nothing happens... can you guide me in the right direction please...

[audraoc]

I meant WHILE CREATING TEMPLATE IN ARTISTEER you have to choose submenu dropdown option. You have to come back to Artisteer and make sure that you did that.

[MechtaDesign]

OMG! I just got it.... lol...

Module Manager > Top Menu

Position: User 3
Menu name: topmenu
Menu Style: list
Always show sub-menu items: yes

http://online.mechtadesign.com

thank you so much!....

[VileSYN]

I had the same issue with a custom template from using my Artisteer template. Of course, I was checking Joomla forums first, and it said to set the End Level of the module (for whatever menu), to "1". I had everything else set correctly, and it never worked. After reading this thread, I realized that no one set that. So I set it back to "0", and all was good. I hope this helps someone.

[bogsdolox]

Re-posted under Administration

[Foaman]

Nice topic....

None of these solutions worked for me. Going with Artisteer feels like it was a mistake. The CSS is quite complicated, and there are no tutorial resources for the code itself within the program or at their site home.

I tried every possible configuration of the top menu module possible. List view, always show.... Toggled expand, parent, .... I basically spent an hour toggling and de-toggling everything and then a bunch of time trying to comb through and adjust the CSS with no luck....

If anyone can dig out/identify/post? the portion of the CSS which works with the top suckerfish drop-down effect, I would greatly appreciate it. Surely, it is somewhere within the below block of code:

Code: Select all

/* begin Menu */
/* menu structure */

.artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
{
  text-align:left;
  text-decoration:none;
  outline:none;
  letter-spacing:normal;
  word-spacing:normal;
}

.artmenu, .artmenu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}

.artmenu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
  background:none;
}

.artmenu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.artmenu li li
{
  float: none;
}

.artmenu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background:none;
}

.artmenu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.artmenu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.artmenu:after, .artmenu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.artmenu, .artmenu ul
{
  min-height: 0;
}

.artmenu ul
{
  background-image: url(../images/spacer.gif);
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}

.artmenu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}


/* menu structure */

.nav
{
  position: relative;
  margin: 0  auto;
  width: 874px;
  height: 41px;
  z-index: 100;
}

.artmenu
{
  padding: 12px 6px 0px 6px;
}


.nav .l, .nav .r, .nav .r div
{
  top: 0;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  height: 41px;
}

.nav .l
{
  left: 0;
  right: 0px;
}


.nav .r
{
  right: 0;
  width: 0px;
}


.nav .r div
{
  width: 874px;
  right: 0;
}


.nav .l, .nav .r div
{
  background-position: left top;
  background-repeat: no-repeat;
  background-image: url('../images/nav.png');
}

/* end Menu */

/* begin MenuItem */
.artmenu ul li
{
  clear: both;
}

.artmenu a , .artmenu a span
{
  height: 29px;
  display: block;
}


.artmenu a
{
  cursor: pointer;
  text-decoration: none;
  margin-right: 2px;
  margin-left: 2px;

}
.artmenu a
{
  background-image: url('../images/item-left.png');
  background-position: left top;
  background-repeat: no-repeat;
}

.artmenu a span
{
  background-image: url('../images/item-right.png');
  background-position: right top;
  background-repeat: no-repeat;
}
.artmenu a span span
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  color: #DDDEDF;
  padding: 0 19px;
  margin: 0 7px;
  line-height: 29px;
  text-align: center;
  background-image: url('../images/item-center.png');
  background-position: left top;
  background-repeat: repeat-x;

}


.artmenu a:hover
{
  background-position: left -29px;
}

.artmenu li:hover>a
{
  background-position: left -29px;
}
.artmenu li:hover a span
{
  background-position: right -29px;
}

.artmenu a:hover span
{
  background-position: right -29px;
}


.artmenu a:hover span span
{
  color: #232424;
  background-position: left -29px;
}

.artmenu li:hover a span span
{
  color: #232424;
  background-position: left -29px;
}


.artmenu a.active
{
  background-position: left -58px;
}

.artmenu a.active span
{
  background-position: right -58px;
}

.artmenu a.active span span
{
  color: #111212;
  background-position: left -58px;
}

/* end MenuItem */

Now, I actually tried taking code (below) from a theme whose drop-down menus, according to Artisteer, work. This resulted in the menu's becoming non-graphical and vertical. Still no drop-down. Of course, I tried manipulating the code below because the targets and image names are different. Of course, it didn't work. Perhaps because I thought that the code might help, though:

Code: Select all

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
  text-align: left;
  text-decoration: none;
  outline: none;
  letter-spacing: normal;
  word-spacing: normal;
}

.art-menu, .art-menu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}

.art-menu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
  background: none;
}

.art-menu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.art-menu li li
{
  float: none;
}

.art-menu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background: none;
}

.art-menu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.art-menu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.art-menu:after, .art-menu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.art-menu, .art-menu ul
{
  min-height: 0;
}

.art-menu ul
{
  background-image: url(../images/spacer.gif);
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}




/* menu structure */

.art-menu
{
  padding: 12px 6px 0 6px;
}

.art-nav
{
  position: relative;
  height: 41px;
  z-index: 100;
}

.art-nav .l, .art-nav .r
{
  position: absolute;
  z-index: -1;
  top: 0;
  height: 41px;
  background-image: url('../images/nav.png');
}

.art-nav .l
{
  left: 0;
  right: 0;
}

.art-nav .r
{
  right: 0;
  width: 874px;
  clip: rect(auto, auto, auto, 874px);
}


/* end Menu */

/* begin MenuItem */
.art-menu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 29px;
  cursor: pointer;
  text-decoration: none;
}

.art-menu li
{
  margin-right: 2px;
  margin-left: 2px;
}

.art-menu ul li
{
    margin:0;
    clear: both;
}


.art-menu a .r, .art-menu a .l
{
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  height: 87px;
  background-image: url('../images/menuitem.png');
}

.art-menu a .l
{
  left: 0;
  right: 4px;
}

.art-menu a .r
{
  width: 408px;
  right: 0;
  clip: rect(auto, auto, auto, 404px);
}

.art-menu a .t
{
  margin-right: 10px;
  margin-left: 10px;
  color: #DDDEDF;
  padding: 0 19px;
  margin: 0 4px;
  line-height: 29px;
  text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
  top: -29px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
  top: -29px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
  top: -29px;
}
.art-menu a:hover .t
{
  color: #232424;
}

.art-menu li:hover a .t
{
  color: #232424;
}

.art-menu li:hover>a .t
{
  color: #232424;
}


.art-menu a.active .l, .art-menu a.active .r
{
  top: -58px;
}

.art-menu a.active .t
{
  color: #111212;
}
/* end MenuItem */

/* begin MenuSubItem */
.art-menu ul a
{
  display: block;
  text-align: center;
  white-space: nowrap;
  height: 20px;
  width: 180px;
  overflow: hidden;
  line-height: 20px;
  background-image: url('../images/subitem.png');
  background-position: left top;
  background-repeat: repeat-x;
  border-width: 0;
  border-style: solid;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
  display: inline;
  float: none;
  margin: inherit;
  padding: inherit;
  background-image: none;
  text-align: inherit;
  text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
  text-align: left;
  text-indent: 12px;
  text-decoration: none;
  line-height: 20px;
  color: #111212;
  margin-right: 10px;
  margin-left: 10px;
  margin:0;
  padding:0;
}

.art-menu ul li a:hover
{
  color: #232424;
  background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
  color: #232424;
  background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
  color: #232424;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
  color: #232424;
}


/* end MenuSubItem */

[akjacques]

Have you actually got articles under the top menu in sub-menu format? I was having this same issue this morning and everything seemed right except i only had one article in the top menu and nothing happened when hovered.
As soon as I added a second article the drop down menu started working and has been sweet since.

[Foaman]

Yes, there are multiple articles under there. Thank you.

[durastar]

Spent 1.5 days up-down Artisteer/Joomla forums and no workable answer....my topmenu drop-downs still don't work.

Parameters:
Top Menu : user3
Menu Style : List
Start Level : 0
End Level : 3 (Tried numbers 0-10)
Show Sub-menu : YES

Advanced Parameters
Is there supposed to be something different here???
Menu Class Suffix : -nav (also tried art-menu)
Module Class Suffix:

I already of have multiple categories and articles with content under these sections.

In Artisteer, I did have Sub-menus selected for the Top Menu. This is evident in the CSS code for my template:
***** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed *****_
/* end MenuSeparator */

/* begin MenuSubItem */
.art-menu ul a
{
display: block;
text-align: center;
white-space: nowrap;
height: 20px;
width: 240px;
overflow: hidden;
line-height: 20px;
background-image: url('../images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #ABABAB;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 20px;
color: #FFE01A;
margin-right: 10px;
margin-left: 10px;
font-size: 16px;
margin:0;
padding:0;
}

.art-menu ul li a:hover
{
color: #000000;
border-color: #ABABAB;
background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
color: #000000;
border-color: #ABABAB;
background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #000000;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #000000;
}


/* end MenuSubItem */
***** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed *****___

I'm at wits end, can anybody PLEASE PLEASE help poor poor me?

Website: munilite.com/caster-wheel-catalog/

[dinho_nohcho]

Hi guys. I have similar problem. I'm very new for joomla and don't know many things yet. But I have been doing all of the above hoping that my main menus wud work properly.

The problem is when I create the main menu on Artisteer I create a beautiful menus but once I install the template to my website the menus become like links . Like on the picture below. I have tried using Artisteer 2.3 and 2.5 and on both versions I get the same result so I don't think it is the programs issue but the lack of my knowledge of joomla probably. Please can anyone help?

[cretzoo]

Hi i'm also new to joomla, and trying to get the same problem fixed. After spending hours and hours and a lot of coffee, i found the answer. Here is the link: http://www.artisteer.com/?p=help_joomla So basically in your joomla admin you have to go to modules, select your module to edit (eg: main menu) and at advanced parameters (in the left side panel) at Module class suffix you have to write art-vmenu, save it and that's it

Good luck with this

[dinho_nohcho]

Hi i'm also new to joomla, and trying to get the same problem fixed. After spending hours and hours and a lot of coffee, i found the answer. Here is the link: http://www.artisteer.com/?p=help_joomla So basically in your joomla admin you have to go to modules, select your module to edit (eg: main menu) and at advanced parameters (in the left side panel) at Module class suffix you have to write art-vmenu, save it and that's it

Good luck with this

Wow!!! That is exactly what I wanted. Yes, I did spend tons of time trying to do it. Thank you very much for kind help

[emceelamb]

Hey I have the similar problem as dinho_chinho; the menu i created in artisteer refuses to show. I did as cretzoo and the artisteer said but yielded no results.
does anyone have any suggestions to try ?

[Riverside]

Hey people! I've had this same problem numerous times, even with all Artisteer settings set up properly. I too, keep forgetting one simple thing and have to "rediscover" the cause of it each time:

Make sure you go to the module settings for the menu (MODULE SETTINGS, not the menu settings), in JOOMLA, and that "Always show sub menu items" is set to "Yes."

If that module setting isn't changed (default is "No"), the sub-menu items will not be activated.