Joomla Nevigation Menu_问答_开发者_运维开发者技术经验分享

How to c开发者_高级运维reate Joomla main menu with sub menu.

Do not modify the core code! There is a simple solution without hacking the core. Hacking the core will cause problems during upgrades, not to mention that you will not be able to use the main menu module anywhere else since the menu will be hard coded.

Joomla is designed to use CSS to accomplish what you need.

First, in the menu module, add a module class suffix so that the CSS can be applied to this module only. Something like -mainmenu will work. This will change the module class from "moduletable" to "moduletable-mainmenu".

Next you add some CSS to make the background images work the way you want to. Something like this -

.moduletable-mainmenu LI{background:url(path-to-square-background.jpg)}
.moduletable-mainmenu LI:hover{background:url(path-to-square-background-mouseover.jpg)}
.moduletable-mainmenu UL:first-child{background:url(path-to-left-rounded-background.jpg)}
.moduletable-mainmenu UL:first-child:hover{background:url(path-to-left-rounded-background-mouseover.jpg)}
.moduletable-mainmenu UL:last-child{background:url(path-to-right-rounded-background.jpg)}
.moduletable-mainmenu UL:last-child:hover{background:url(path-to-right-rounded-background-maouseover.jpg)}

Joomla will also add id="current" to the current menu so you can add that to the CSS if you want to highlight the current menu. Further, you can also turn on Active Parent in the Other Parameters of the menu module so that Joomla adds class="parent" to the parent menu item if you want to highlight the parent menu item as well.

Now you can have rounded corners without having to hack any core code.

It is easy to do it.

here i had explain how to do it.

1.Copy your html code for menu . 2.Go to your flies --> modules --> mod_mainmenu --> legacy.php 3.GO to line 380 ''; echo ''; echo '';

            if ($spacer_end) {
                echo '<span class="' . $menuclass . '"> ' . $spacer_end . ' </span>';
            }

            if ($spacer_start) {
                $html = '<span class="' . $menuclass . '"> ' . $spacer_start . ' </span>';
                echo implode($html, $links);
            } else {
                echo implode('', $links);
            }

            if ($spacer_end) {
                echo '<span class="' . $menuclass . '"> ' . $spacer_end . ' </span>';
            }

            echo '</td>';
            echo '</tr>';
            echo '</table>';`

4.copy and paste your html code here. ex:

echo "
            <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
          <tr>
            <td><div id=\"menu\">
          <ul>
                                     <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=frontpage&Itemid=63\" class=\"current\"> Home</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&Itemid=27\">Profile</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=friends&Itemid=2\" onmouseover=\"bizdropdownmenu(this, event, 'menu1')\">Friends</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=inbox&Itemid=41\" onmouseover=\"bizdropdownmenu(this, event, 'menu2')\">Message</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=photos&Itemid=49\" onmouseover=\"bizdropdownmenu(this, event, 'menu3')\">Photos</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=videos&Itemid=74\" onmouseover=\"bizdropdownmenu(this, event, 'menu4')\">Videos</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=events&Itemid=142\" onmouseover=\"bizdropdownmenu(this, event, 'menu5')\">Events</a></li>
                                    <li>
                                    <a href=\"http://project.websolusionz.com/speed/index.php?option=com_kunena&view=listcat&catid=0&func=listcat&Itemid=165\">Forum</a></li>
                                    <li><a href=\"chat.html\">Chat</a></li>
                                    <li><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&Itemid=158\" onmouseover=\"bizdropdownmenu(this, event, 'menu6')\">My&nbsp;Account</a></li>
          </ul>
         <div class=\"menu\" id=\"menu1\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=search&Itemid=74&Itemid=129\">Search</a><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=search&task=advancesearch&Itemid=74&Itemid=130\">Advanced Search</a><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=friends&task=invite&Itemid=2&Itemid=131\">Invite Friends</a><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=friends&task=sent&Itemid=2&Itemid=132\">Request Send</a><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=friends&task=sent&Itemid=2&Itemid=133\">Pending My Approval</a></div>
         <div class=\"menu\" id=\"menu2\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=inbox&task=sent&Itemid=77&Itemid=135\">Send</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=inbox&task=write&Itemid=41&Itemid=50\">Compose Message</a></div>
         <div class=\"menu\" id=\"menu3\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=photos&task=myphotos&userid=84&Itemid=74&Itemid=139\">My Photos</a></div>
         <div class=\"menu\" id=\"menu4\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=videos&task=myvideos&userid=84&Itemid=74&Itemid=140\">My Videos</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=videos&task=search&Itemid=74&Itemid=141\">Search Videos</a></div>
         <div class=\"menu\" id=\"menu5\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=events&task=myevents&userid=84&Itemid=82&Itemid=143\">My Events</a></div>
         <div class=\"menu\" id=\"menu6\"><a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=linkVideo&Itemid=164\">Change Profile Videos</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=uploadAvatar&Itemid=164\">Change Profile Picture</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=edit&Itemid=164\">Edit Profile</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=editDetails&Itemid=164\">Edit Detail</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=privacy&Itemid=164\">Privacy</a>
         <a href=\"http://project.websolusionz.com/speed/index.php?option=com_community&view=profile&task=preferences&Itemid=164\">Preferences</a>
         </div>
        </div></td>
          </tr>
        </table>";


        /*  if ($spacer_end) {
                echo '<span class="' . $menuclass . '"> ' . $spacer_end . ' </span>';
            }

            if ($spacer_start) {
                $html = '<span class="' . $menuclass . '"> ' . $spacer_start . ' </span>';
                echo implode($html, $links);
            } else {
                echo implode('', $links);
            }

            if ($spacer_end) {
                echo '<span class="' . $menuclass . '"> ' . $spacer_end . ' </span>';
            }*/

            /*echo '</td>';
            echo '</tr>';
            echo '</table>';*/
            break;
    }
}

}

5.now you add menu in main menu. 6.surely you will get your menu in front panel.