civicrm3 menu problems

[leopitt]

I notice that there is a thread similar to this in the alpha / beta testing forum, but I cannot post there and it seems that civiCRM is no longer alpha / beta, so I hop nobody minds me starting a fresh discussion here.

http://forum.civicrm.org/index.php/topic,9301.msg40177.html#msg40177
http://forum.civicrm.org/index.php/topic,9301.msg40177.html#msg40177

It has been previously noticed that the CiviCRM 3 menu does not go very well with Drupal's admin menu. Namely, the civicrm menu sits on top of and hides the admin menu by default.
 
I really do not understand why this menu has been made so complicated. Surely it would be far simpler to simply provide a menu block with the normal drupal nested ul's, which can then be positioned wherever in a site's theme it is needed, and can take full advantage of CSS to be styled as drop-downs or whatever, in the normal way.

The current CiviCRM menu uses some (to my eyes) unusual mark-up.. E.g. the menu appears at the top of my html page, in the expected format. But is then overriden with inline styles and duplicated at the foot of the page, presumably using javascript...

Why the duplication? Why the complexity? This makes it inflexible and difficult for developers and themers to alter.

[Dave Greenberg]

The current CiviCRM menu uses some (to my eyes) unusual mark-up.. E.g. the menu appears at the top of my html page, in the expected format. But is then overriden with inline styles and duplicated at the foot of the page, presumably using javascript...

Why the duplication? Why the complexity? This makes it inflexible and difficult for developers and themers to alter.

The CiviCRM menu should only appear at the top of the page - similar 'black bar' with dropdowns as the Drupal admin menu. if you are seeing duplication, then there is probably a configuration issue on your site. Might help to first look at the public demo (link above) to confirm what it should look like, compare that to your site and then post a screenshot so folks can see what you're seeing.

In general, feedback on the new menu has been quite positive since the block approach we used previously made getting around much less efficient / often requiring multiple clicks.

[leopitt]

Hi Dave, and thanks for the swift reply.

When I said about the menu being duplicated at the foot of the page, I meant the HTML rather than the visual position of the menu.

E.g. viewing source in Firebug I can see at the top of the page, the expected <ul>:

    <ul id="civicrm-menu">
        <li id="crm-qsearch" class="menumain">
            <form action="/civicrm/contact/search/basic" name="search_block" id="id_search_block" method="post" onsubmit="getSearchURLValue( );">

Fine. So no matter what CiviCRM's CSS looks like, I should be able to override with my own CSS to come up with a pure CSS drop-down menu in a manner that suits my site best.

But this is made difficult because all the 2nd level li's in the menu have inline "display: none" styles. I presume these are set by javascript.

So if the 2nd level li's are hidden, where do the drop-downs come from? Rather than coming from the original li's, they are coming from a bunch of div's at the bottom of the HTML page, created I assume by javascript (note that the following is pasted from Firebug, the div contents are not visible for brevity, I just want to indicate the structure of the HTML):

<div id="root-menu-div" style="position: absolute; top: 0pt; left: 0pt;">
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
<div class="shadowbox1"/>
<div class="shadowbox2"/>
<div class="shadowbox3"/>
<ul class="menu-ul innerbox">
</ul>
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 37px; left: 272.6px; display: none;">
<div class="shadowbox1"/>
<div class="shadowbox2"/>
<div class="shadowbox3"/>
<ul class="menu-ul innerbox">
<li class="" style="position: relative;">
</li>
<li class="" style="position: relative;">
</li>
<li class="" style="position: relative;">
</li>
<li class="" style="position: relative;">
</li>
<li class="menu-separator" style="position: relative;">
</li>
<li class="" style="position: relative;">
</li>
<li style="position: relative;">
</li>
<li class="" style="position: relative;">
</li>
<li class="menu-separator" style="position: relative;">
</li>
<li style="position: relative;">
</li>
<li style="position: relative;">
</li>
</ul>
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
<div class="menu-div outerbox" style="position: absolute; top: 0pt; left: 0pt; display: none;">
</div>
</div>

The problem I have with this is that it

• makes it difficult to restyle the menu using just CSS, because there are inline styles, thus makes it inflexible
• there is duplication of HTML, which is just seems to me to be a bit of a waste of bandwidth!

There is another problem I'm having with the menu disappearing when I collapse form fieldsets, but I can see from the demo that this must be a problem with my installation rather than CiviCRM necessarily.

The complexity of the menu implementation doesn't make it any easier to debug though...

[Dave Greenberg]

I'm pretty sure we are using a plugin for the menu (rather than something we developed from scratch) - which makes sense for us given our resources and the need to adopt something that has a decent chance of working across a number of platforms and end-user environments. That said, if you have resources to research, propose (for community discussion), AND implement a patch which you think provides a more stream-lined and flexible solution (with a "track-record") - go for it :-)

As a side note, we have been getting feedback from integrators and others in the community that it makes sense for the back-office pieces of CiviCRM to have a standardized look and feel that CAN BE pretty independent of theme and CMS. Hence the 'flexibility' of the back-office menu for theming may not be a high priority for folks.

[leopitt]

That said, if you have resources to research, propose (for community discussion), AND implement a patch which you think provides a more stream-lined and flexible solution (with a "track-record") - go for it :-)

Touché

Famous last words, but I will try to take a look at it....

As a side note, we have been getting feedback from integrators and others in the community that it makes sense for the back-office pieces of CiviCRM to have a standardized look and feel that CAN BE pretty independent of theme and CMS. Hence the 'flexibility' of the back-office menu for theming may not be a high priority for folks.

I can imagine that if most CiviCRM developers are more interested in a working and highly featured CRM system that can be setup relatively quickly, rather than a CRM that looks and behaves "just right", inline styles will matter less... Still, it bothers me.

[jbrain]

I did some searching and this thread is something close to what I'm having issues with..

I've encountered an issue with the Drupal Admin Menu stickin on top and not allowing the CiviCRM menu show..

http://forum.civicrm.org/index.php/topic,11874.0.html

I think it has something to do with the Theme, as is works good with Garland, just issues with SKY.
I'm not sure if I posted that in the right forum, but if anyone comes accross a solution let me know!

Cheers

JB

[jsherk]

When the CiviCRM menu is sitting on top of the Drupal Admin Menu, you can click HOME then Drupal Menu and it will pop the Drupal Menu up on top without leaving the page you are on. You can then click CiviCrm on the Drupal Menu and it will pop the CiviCRM menu back on top.

That's how it works with drupal 6.16 and civi 3.1.4 anyways!

[justclint]

Hey Guys, just installed my 1st CiviCRM into Drupal, well 1st CiviCRM for that matter. The installation seems to of gone ok but Im having a menu issue.

Ive tried disabling the drupal admin menu module but problem still exists.

My 1st impression is that its a css issue. Basically what looks to be happening is that instead of each li tag (menu item) having a narrow width and floating to the left, each menu item seems to have a 100% width and the all the menu items are listed all the way down the page.

Ive attached an image so you can check it out.

If anyone has any ideas that would be fantastic.

Thanks!

[justclint]

So I found out whats wrong but Im not entirely sure what the best way is to approach a fix to this. My problem seems to be that Im using jqui and this seems to be adding classes to the CiviCRM menu.

When I take out jqui I can see (using firebug) that the correct menu output is like so:

<code>
<ul id="civicrm-menu">
<li class="menumain" id="crm-qsearch">
<li class="menumain">
<li class="menumain">
<li class="menumain">
<li class="menumain">
<li class="menumain">
<li class="menumain">
<li class="menumain">
<li class="menumain">
<li class="menumain">
<li class="menumain">
<li class="menumain" id="menu-logout">
<ul>
</code>

But when I have jqui installed I get this menu output:

<code>
<ul id="civicrm-menu" class="ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" aria-activedescendant="ui-active-menuitem">
<li class="menumain" id="crm-qsearch">
<li class="menumain ui-menu-item" role="menuitem">
<li class="menumain ui-menu-item" role="menuitem">
<li class="menumain ui-menu-item" role="menuitem">
<li class="menumain ui-menu-item" role="menuitem">
<li class="menumain ui-menu-item" role="menuitem">
<li class="menumain ui-menu-item" role="menuitem">
<li class="menumain ui-menu-item" role="menuitem">
<li class="menumain ui-menu-item" role="menuitem">
<li class="menumain ui-menu-item" role="menuitem">
<li class="menumain ui-menu-item" role="menuitem">
<li class="menumain ui-menu-item" id="menu-logout" role="menuitem">
<ul>
</code>

Has anyone experienced this or know how to fix this without having to edit the jqui default files?

Thanks!