How can I clear all CSS classes from sitemenu object in

3/1/2011 9:47:06 AM

Mehrdad2020

Total Posts 11

View Posts

How can I clear all CSS classes from sitemenu object in layout.master

Hi all friend (Specially Joe, Thanks a lot my friend for your nice job)

I am working for 2 weeks on MojoPortal and I have become really interested on this portal :)

Now I have a question about portal:SiteMenu object in layout.master file.

I want to use my jquery plugin for site menu indeed during rendering the page, the engine add a lot of css classes to this item.

For example

AspNet-Menu AspNet-Menu-SelectedLeaf static
AspNet-Menu-Leaf static
and etc

I want only simple <ul><li> </li></ul> format with no css class and then I want to wrap this collection by a div element and change it via jquery plugin.

Please tell me what should I do in order to remove all css classes from rendered site menu object?

Thanks a lot for your help :)

===============================

God is Great.

3/1/2011 10:21:59 AM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: How can I clear all CSS classes from sitemenu object in layout.master

Hi, those AspNet-Menu classes are a result of using treeview in the SiteMenu declaration. You need to add

UseTreeView="false"

To your SiteMenu declaration in layout.master.

3/1/2011 11:11:44 AM

Mehrdad2020

Total Posts 11

View Posts

Re: How can I clear all CSS classes from sitemenu object in layout.master

Dear Jamie

I have done this.

I have used this tag in my layout.master

<portal:SiteMenu id="SiteMenu1" runat="server" UseTreeView="false" HideMenuOnSiteMap="false" Direction="Horizontal" TopLevelOnly="false" />

But Unfortunately, after rendering, the css classed are added and they are not gone !!

It is output html

<div id="ctl01_SiteMenu1_ctl00" class="AspNet-Menu-Horizontal" style="float: left;">
<ul class="AspNet-Menu static" tabindex="0" style="position: relative; width: auto; float: left;" role="menubar">
   <li class="AspNet-Menu-WithChildren AspNet-Menu-SelectedWithChildren has-popup static" aria-haspopup="ctl01_SiteMenu1_ctl00:submenu:2" role="menuitem" style="position: relative; float: left;">
    <a class="AspNet-Menu AspNet-Menu-SelectedWithChildren static" href="/home1.aspx" tabindex="-1">
     Home</a>
    <ul id="ctl01_SiteMenu1_ctl00:submenu:2" style="display: none; position: absolute; top: 100%; left: 0px;" class="dynamic">
     <li class="AspNet-Menu-Leaf AspNet-Menu-ParentSelected dynamic" role="menuitem" style="position: relative;">
      <a class="AspNet-Menu AspNet-Menu-ParentSelected dynamic" href="/sub1.aspx" tabindex="-1">
       Sub1</a>
     </li>
    </ul>
   </li>
   <li class="AspNet-Menu-Leaf static" role="menuitem" style="position: relative; float: left;">
    <a class="AspNet-Menu static" href="/contact.aspx" tabindex="-1">
     contact</a>
   </li>
   <li class="AspNet-Menu-Leaf static" role="menuitem" style="position: relative; float: left;">
    <a class="AspNet-Menu static" href="/about.aspx" tabindex="-1">
     about</a>
   </li>
</ul>

</div>

while I want to have this output (ideal output for me is)

    <div id="ctl01_SiteMenu1_ctl00">
        <ul>
            <li><a href="/home1.aspx">Home</a>
                <ul>
                    <li><a href="/sub1.aspx">Sub1</a> </li>
                </ul>
            </li>
            <li><a href="/contact.aspx">contact</a> </li>
            <li><a href="/about.aspx">about</a> </li>
        </ul>
    </div>

3/1/2011 12:02:38 PM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: How can I clear all CSS classes from sitemenu object in layout.master

Well, I'm really not sure if you can get to the goal of having no markup at all in the menu. The supported types of site menus in mojoPortal are

TreeView
SuperFish
Artisteer

They all have some markup involved, both classes and spans. These menu types can also be combined with a vertical menu, if desired. The documentation on SiteMenu is here, in case you haven't seen it yet. The Artisteer menu type is not documented there, but if you want to give that a try, you can use this in the SiteMenu declaration and see if it will work better for you:

UseArtisteer="true"

The other possibility (admittedly slim) is that Joe might agree to add built-in support to mojoPortal for this jQuery menu plugin. Is it a publicly available and supported plugin, and if so, where can it be downloaded? Does it offer navigation that's substantially better than the existing menu types?

Jamie

3/2/2011 1:26:40 PM

Mehrdad2020

Total Posts 11

View Posts

Re: How can I clear all CSS classes from sitemenu object in layout.master

Dear Jamie

Can we request from Mojo Portal team support in order to add new feature to menus for next updates.

for example

in portal:SiteMenu there are some options

UseArtisteer
UseSuperfish

and can you add new mode, "SIMPLE"

when we use simple mode, it rendered only <ul><li> tag with no css class and extra tags.

what is your idea about this request my friend?

3/2/2011 2:20:46 PM

Joe Audette

Total Posts 18439

View Posts

Re: How can I clear all CSS classes from sitemenu object in layout.master

Hi,

I'm not sure why you need to get rid of those classes other than just wanting to tidy up the markup and reduce a little bulk, it should not affect your menu plugin as long as there is no CSS rules for those classes in your css files of your skin.

If your style.config file has an entry for stylemenu.css that has styles for those classes you can remove that entry from style.config then no css will work against what the plugin javascript is trying to do.

You could set the menu to UseArtisteer="true"

It actually renders less classes and therefore will tidy up the markup a little but it still has active class on active items, but again you can remove any css from your css files that applies rules for that class and it should not be any problem.

Hope it helps,

Joe

3/2/2011 2:39:55 PM

Mehrdad2020

Total Posts 11

View Posts

Re: How can I clear all CSS classes from sitemenu object in layout.master

Hi Joe

I am very happy because I see you are in my topic

at first thanks a lot for your nice project. mojo is great portal :)

but in my idea, this is a good option for those who want to have RAW data instead of complicated DIV and CSS tags

=============

I am working in template and banner projects for 4 years. before I was working on TPL files of php scripts.

but I am going to try mojo because it is very powerful amd user friendly.

I think if you put a choice for all components (or at least some of them) in your project that some users are able to turn off some rendering tags. it will be very good.

Specially in menu, because I want to use some jscript/jquery plugin in order to make RTL menu (Artisteer and the other menu objects have prolems wirh RTL submenus)

now what is your idea? is it very hard my friend or you think this idea is not good?

3/3/2011 1:43:33 AM

Mehrdad2020

Total Posts 11

View Posts

Re: How can I clear all CSS classes from sitemenu object in layout.master

You know Joe

In my idea, when you want to design a template/skin for a project it is better that you start from ZERO point. I think it is very good that the skin designer has full management on the codes.

when you want to edit/manipulate the skin and CSS that is designed by other person sometimes you encounter some complicated puzzles.

Specially in skins because there are different ways in order to build a skin. one person uses div element, another one uses table structure and etc

so In my idea, if you add a feature to all of your objects that are used in layout.master file that enable the skin designer to turn off rendering extra tags it will be very easy for some of skin designers like me :)

For example add feature such as "UsingAutomaticRendering" that it's default value is "TRUE"

it means that when a component are processing in mojo asp.net engine, extra tags (such as div, css classes and etc) will be added automaticall and when this property is off, it means no CSS class and div tag are rendered by engine.

My ideal HTML output for site menu is

<ul>

<li><a href="home.aspx">Home Page</a></li>

<li><a href="contact.aspx">Contact us</a></li>

<li><a href="about.aspx">About us</a></li>

<li><a href="products.aspx">Products</a>

<ul>

<li><a href="product1.aspx>Product 1</a></li>

<li><a href="product2.aspx>Product 2</a></li>

</ul>

</li>

</ul>

I know it is maybe hard and time consuming but I think it will be useful for your portal growing.

there is no doubt that security, user friendly, speed are very important in CMS but we can't ignore SKIN issue :)

Now I am very interesting to hear your idea my friend :)

Have a nice time

===========================

Mehrdad

3/3/2011 9:06:11 AM

Joe Davis

Total Posts 2253

View Posts

Re: How can I clear all CSS classes from sitemenu object in layout.master

Hi,

Mehrdad2020, I think I would have to disagree with you on this. Every single module must contain divs and css classes in order for them to work out of the box. Other CMS platforms try to get around this but really all they end up with is a very confusing skinning engine.

As far as your menu goes, you can ignore the classes that are applied to it by default and wrap the menu in a div or whatever you want with your own css class. As this point, you can style the menu as if the mojo-generated classes aren't even there. For instance, here is the HTML generated for the Site Menu on a client site:

<div id="ctl01_SiteMenu1_ctl00" class="AspNet-Menu-Horizontal">
   <ul class="AspNet-Menu">
        <li class="AspNet-Menu-Leaf AspNet-Menu-SelectedLeaf">
            <a class="AspNet-Menu AspNet-Menu-SelectedLeaf" href="/home.aspx">
                Home
            </a>
        </li>
        <li class="AspNet-Menu-Leaf">
            <a class="AspNet-Menu" href="/about-us.aspx">
                About Us
            </a>
        </li>
        <li class="AspNet-Menu-Leaf">
            <a class="AspNet-Menu" href="/intersection-blog.aspx">
                Intersection Blog
            </a>
        </li>
        <li class="AspNet-Menu-Leaf">
            <a class="AspNet-Menu" href="/ministry.aspx">
                Ministry
            </a>
        </li>
        <li class="AspNet-Menu-Leaf">
            <a class="AspNet-Menu" href="/news-events.aspx">
                News & Events
            </a>
        </li>
   </ul>
</div>

If I didn't want to use the default classes, I could easily wrap the menu a different element, with my own class(I will use a div for this example):

<div class="myMenu">
   <div id="ctl01_SiteMenu1_ctl00" class="AspNet-Menu-Horizontal">
        <ul class="AspNet-Menu">
            <li class="AspNet-Menu-Leaf AspNet-Menu-SelectedLeaf">
                <a class="AspNet-Menu AspNet-Menu-SelectedLeaf" href="/home.aspx">
                    Home
                </a>
            </li>
            <li class="AspNet-Menu-Leaf">
                <a class="AspNet-Menu" href="/about-us.aspx">
                    About Us
                </a>
            </li>
            <li class="AspNet-Menu-Leaf">
                <a class="AspNet-Menu" href="/intersection-blog.aspx">
                    Intersection Blog
                </a>
            </li>
            <li class="AspNet-Menu-Leaf">
                <a class="AspNet-Menu" href="/ministry.aspx">
                    Ministry
                </a>
            </li>
            <li class="AspNet-Menu-Leaf">
                <a class="AspNet-Menu" href="/news-events.aspx">
                    News & Events
                </a>
            </li>
        </ul>
   </div>
</div>

At this point, I can create the CSS selectors however I want:

.myMenu {float: left; background-color: green;}
.myMenu ul {margin: 0; padding: 0;}
.myMenu ul ul {margin: 0; padding: 0 0 0 5px;}
.myMenu a {color: blue; text-decoration: none;}
.myMenu a:hover {color: white; text-decoration: underline;}
.myMenu li.AspNet-Menu-SelectedLeaf {background-color: purple; font-weight: bold; color: white;}

The only class I would need to use is the selected item class of 'AspNet-Menu-SelectedLeaf.

All of this said, I don't really understand why this is an issue. If you need a different set of classes rendered for easy compatibility with some jQuery plugin or something like that, that would be a different story. To just want the menu rendered without classes doesn't make a lot of sense to me because you can just remove all of the CSS selectors in your skin stylesheets that have to do with the menu and you would end up with an un-styled menu regardless of the fact that the menu elements have classes.

HTH,
Joe D.

3/3/2011 10:56:48 AM

Mehrdad2020

Total Posts 11

View Posts

Re: How can I clear all CSS classes from sitemenu object in layout.master

Thanks a lot Joe Davis for your attention to this issue

I said it is optional. if there is a property (like UseAutomaticRendering) it would be very good for all people.

I believe a lot of people may have no problem but a few ones (like me) prefer to have RAW codes with no extra tag and style them themeselves.

it depends on the main developers of Mojo

If he put this property it would be very good for me :)

3/3/2011 3:47:42 PM

Joe Audette

Total Posts 18439

View Posts

Re: How can I clear all CSS classes from sitemenu object in layout.master

I actually have an idea for this to make it possible to control the css classes used in the menu and treeview by settings in theme.skin file, and if needed I could add a property to enable turning off css altogether.

I'll post again after I get a chance to experiment with my idea.

Best,

Joe