CiviCRM Community Forums (archive)

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.

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...

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.

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!

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!