Drop Down Menu

mtechsolution
12 years, 8 months ago

I have installed the Mobile Joomla module. My site works on mobile devices as it should. The only 2 things I want to change are get rid of text links and make drop down menu like mobile site of mobilejoomla.com. The other issue is how to get rid of advertisement below footer.

Thanks

mtechsolution
12 years, 8 months ago

I have the ads issue resolved...now I just need to make the menu dropdown based instead of text links that get all cluttered up on the mobile display.

Any suggestions? Thanks

LAMF
12 years, 8 months ago

I have not exactly the dropdown menu on my sites but I have styled vertical list that is almost standard on mobile devices, I don't think it's necessary to complicate with a motin dropdown menu.
Here's my custom.css file styliong that you can play around with. Btw I used the iphone styling as a template when I started to play around with colors and other settings.
You also have to make a module suffix thet you can see in the code . mobMen you set it up as a module class suffix in the menu module with just a space and mobMen in the field.
Maybe you already knew this...

 
.mobMen ul {
	margin-top: 3px !important;
	margin-bottom: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	list-style: none inside !important;
	font-weight: bold !important;
	width: 95%;
	}
 
.mobMen ul li {
	padding-bottom: 0;
	padding-left: 0;
}
 
.mobMen li:first-child, .mobMen li:first-child a {
    border-top: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
 
.mobMen li:last-child, .mobMen li:last-child a {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.mobMen li a:link, .mobMen li a:visited {
	background: #444;
	height: 18px;
    border: 1px solid #FFF;
    padding: 1.2em 0 0.8em 1.5em;
    color: #FFF;
    display: block;
	text-transform: uppercase;
    text-decoration: none !important;
	font-weight: 900 !important;
}
 
.mobMen li a:hover {
    background: #2b2b2b;
    height: 18px;
    border-left: 1px solid #4B7027;
    border-right: 1px solid #4B7027;
    padding: 1.2em 0 0.8em 1.5em;
    color: #FF0;
    display: block;
	text-transform: uppercase;
    text-decoration: none;
}

LAMF
12 years, 8 months ago

If you want a real drop-down like the pro template provided here at Mobile joomla you have to use the JQuery Mobile framework and I guess that gets a little tricky to implement unless you know what you're doing...

It looks cool though and the price is not too high I think so it might be worth getting it.

mtechsolution
12 years, 8 months ago

I didn't know this. Thanks for the information. Going to work on it now. Appreciate it greatly.

mtechsolution
12 years, 8 months ago

I see in Joomla where to add the class suffix with a space in the parameters...and I have added the CSS code to the custom.css for smartphone and iPhone. The thing I am confused about is which file do I actually add the module suffix in the coding?

The menu on the site has changed when looking at it from a browser on the computer...but the mobile device menu has not changed. I am sure its because I haven't added the actual module suffix in the code.

Thanks

mtechsolution
12 years, 8 months ago

Another update...after reviewing the coding...this is what I have in my html coding using Firebug in Firefox.

<div class="moduletable mobMen">
<h3>Main Menu</h3>

I think that is correct because the menu does change on the computer...but mobile device stays the same. The menu is not being put in a list.

Looks like this still:
Home Company Clients Services etc....

LAMF
12 years, 8 months ago

First the module suffix should be set in the menu module settings itself.
What mobile device do you use?
Is it a smartphone or something else?
Because I have only used the code on Smartphone and iphone.
It's actually copied and modified code from the mobile iphone template.
I also use Firebug to control the changes and it works great.

Check that you use the menu you have specified and that you really have the menu items added in the menu settings.
It might be that you use the default mobile menu for mobilde joomla and that one has no suffix.
Anyway check out that the module is positioned in mj_smartphone_header position or mj_iphone_header position.
That also depends on what you have set up as main header settings in the component tab settings for smartphone and iphone.

mtechsolution
12 years, 8 months ago

I have went to the Main Menu module and added the suffix mobMen with a space in front of mobMen.

I am using an Android phone to check the mobile site.
The menu has changed on the main webpage when viewing from a browser...it bolded the Menu links. I am not sure what to do from here. Sorry to sound like an idiot but could you maybe walk me through the steps after this?

First joomla site for me.

Thanks a lot.

LAMF
12 years, 8 months ago

Can you check out my sites with working menus and templates how they appear on your android:
gagneffiske.se
or
lmiab.se
Both are on Joomla 1.5.
I have some issues with joomla 2.5.x the content on the start page there wont go away even if I have tried to disable it. Unfortuanately it doesn't seem to be any support for this problem so I'm pretty stuck to this annoying problem.

Anyway let me know what you get from the working urls here.

1 2 3 4

By continuing to use this site you consent to the use of cookies on your device as described in our cookie policy unless you have disabled them. This site will not function correctly without cookies.
I accept cookies from this site. Agree