17 comments found

Love the look of this. Though it is really hard to figure out the CSS3 stuff. Maybe include a video demo for us! Thank you!

SOHN Author

In this item I just use a little CSS3 for animation effects. I will make preview video later. Thank you.

Are you able to hide the Navigation Bar? (have button to hide it)

SOHN
SOHN Author

No, the navbar don’t have the hide feature at this version.

saimax Purchased

How do I make the button clickable and have the page show up?

SOHN
SOHN Author

In current version, the item has not supported click event. ( I will update new version support this feature later). But you can do this now by following steps:

1. To make the main menu can click to show the sub menu you need to add an anchor to tag in main menu.Example: <a href="#menu1">...</a> 2. Then add an id=”menu1” to sub menu. Example:

3. Finally, add new line into css file: .menu1:target { display:block }

and remove the hover event in css file. Find:
.mn-lvl1-menu li:hover .mn-play, .mn-lvl1-menu li:hover .mn-play-2, .mn-lvl1-menu li:hover .mn-play-3,
.mn-lvl1-menu-metro li:hover .mn-play, .mn-lvl1-menu-metro li:hover .mn-play-2, .mn-lvl1-menu-metro li:hover .mn-play-3,
.mn-lvl1-menu li:hover .mn-play-bottom, .mn-lvl1-menu li:hover .mn-play-2-bottom, .mn-lvl1-menu li:hover .mn-play-3-bottom,
.mn-lvl1-menu-metro li:hover .mn-play-bottom, .mn-lvl1-menu-metro li:hover .mn-play-2-bottom, .mn-lvl1-menu-metro li:hover .mn-play-3-bottom {
    display:block;
}
Then, replace to:
/*
.mn-lvl1-menu li:hover .mn-play, .mn-lvl1-menu li:hover .mn-play-2, .mn-lvl1-menu li:hover .mn-play-3,
.mn-lvl1-menu-metro li:hover .mn-play, .mn-lvl1-menu-metro li:hover .mn-play-2, .mn-lvl1-menu-metro li:hover .mn-play-3,
.mn-lvl1-menu li:hover .mn-play-bottom, .mn-lvl1-menu li:hover .mn-play-2-bottom, .mn-lvl1-menu li:hover .mn-play-3-bottom,
.mn-lvl1-menu-metro li:hover .mn-play-bottom, .mn-lvl1-menu-metro li:hover .mn-play-2-bottom, .mn-lvl1-menu-metro li:hover .mn-play-3-bottom {
    display:block;
}
*/

Note: CSS Click event does not work on IE. So for IE you still have to use hover event to show sub menu.

Thanks for your purchase.

saimax Purchased

How do I increase the height of the menu?

SOHN
SOHN Author
To change the height of the main menu you open the metronav.css file then find .mn-lvl1-menu-metro/.mn-lvl1-menu class and change height to value you want.
Example:
.mn-lvl1-menu-metro { height:100px; }
.mn-lvl1-menu { height:40px; }

You also need to change height and line-height properties of .mn-style-1 a/.mn-style-2 a/.mn-style-normal a.
Example:
.mn-style-1 a {
    display:block;    
    color:#fff;
    width:100px;
    line-height:100px; <-- Change this value
    height:86px; <-- Change this value
    text-align:center;
    font-family: 'Dosis', Sans-Serif;
    padding-top:14px;
}

Finally, you set value of top/bottom properties of sub menu.
Example: Top version:
.mn-style-1 .mn-play, .mn-style-1 .mn-play-2, .mn-style-1 .mn-play-3,
.mn-style-2 .mn-play, .mn-style-2 .mn-play-2, .mn-style-2 .mn-play-3 {
    top:100px;
}
.mn-style-normal .mn-play, .mn-style-normal .mn-play-2, .mn-style-normal .mn-play-3 {
    top:40px;
}
Bottom Version:
.mn-style-1 .mn-play-bottom, .mn-style-1 .mn-play-2-bottom, .mn-style-1 .mn-play-3-bottom,
.mn-style-2 .mn-play-bottom, .mn-style-2 .mn-play-2-bottom, .mn-style-2 .mn-play-3-bottom {
    bottom:100px;
}
.mn-style-normal .mn-play-bottom, .mn-style-normal .mn-play-2-bottom, .mn-style-normal .mn-play-3-bottom {
    bottom:40px;
}
SOHN Author

07 Jul 2012: New Update is available.

saimax Purchased

Hi, I am having a hard time trying to get the click able to work on the bottom. Your latest update does not explain where to change to get the bottom to work. I tried according to your document but NO luck. Please email sample file.

SOHN
SOHN Author

Hi, I don’t know how to email to you ( I don’t see your email address when go to your profile ).

To make clickable menu work on the bottom position is easy as the top one.

1. Just add an anchor to <a></a> tag ( #menu1 ) in a main menu.

2. Then add an id=”menu1” to submenu.

3. Finally, change the class of submenu by a clickable class ( Example: if the current submenu class is “mn-play-bottom”, you can change it to “mn-play-bottom-click”, you can see these class in docs ( Section 4 – Important Classes ) ). That’s all.

If you can not make it work please give me your email address, I will send you a clickable bottom sample.

saimax Purchased

How can I use the email form in the MetroNav?

SOHN
SOHN Author

Hi,

This item does not have email sending feature ( this item is just a css template ). If you want to integrate a form that can send email you must create it yourself or you can wait me release other versions.

saimax Purchased

Can I add scrollbar and have more content like your other project?

SOHN
SOHN Author

Yes, you can make scrollbar with this item. If you would like to do this you can use jScrollpane plugin.

Hi, Great job. I found this from Metrobox. Can an Iframe be one of the items on the menu. I need it to go full width with about a 10 to 20 px border on all sides using color or bgimage. Cheers, J

SOHN
SOHN Author

Hi,

Could you give me demos of your problems or what you intend to do ?

Now I can not be sure this plugin will work well with your iframe because I made it just for normal pages/templates.

Default-user

Hi, I PM ’ed the links. Cheers, J

SOHN
SOHN Author

I got your email. I will test your demo with my plugins and reply you later ( soon ).

Thanks.

Is this responsive and similar to your MenuStation code with swipe motion?

Been looking for this to use on mobile webview sites to give it that “app” feel.

SOHN
SOHN Author

Hi,

Sorry, This plugin don’t support responsive design and don’t have swipe feature.

Kind regards

aim71 Purchased

HI What do I have to tweak in the css so that the background of the navigation bar is exactly the same background as the background behind it? i.e, I want the navigation (metronav?) to be #333333 which is the background of my page, but this is somewhat set to an opacity value?

Thanks

SOHN
SOHN Author

Hi,

To change navigation background you can use background classes I created in css file ( replace the current background class by what you need ). You can find all background classes in css file, I placed them at BACKGROUND SET part ( line 474 – 575 ).

Kind regards

This is awesome! I want to put this in a wordpress theme. If I purchase can you help me do that?

Any plans for a wordpress version? Need to do this asap though.

SOHN
SOHN Author

Sorry, I can not provide wordpress support at this time.

I will try to make a wordpress version but can not be sure about the time.

Kind regards.

Hi,

I bought this & then straight away realized that it’s not for Wordpress – whoops! Do you plan to make one that works with WP any time soon?

SOHN
SOHN Author

Hi,

I have a plan to make a WP version for this plugin But I can not be sure about the time.

Kind regards!

Awesome!!

Is there a wordpress version??

If not… is there anything like it??

SOHN
SOHN Author

Hi,

I am studying wordpress. Maybe I will make a wordpress plugin for this plugin.

Kind regards,

any plans to make responsive? really missing out on that market if not.

SOHN
SOHN Author

Hi, I am considering a responsive version. Thanks.


by
by
by
by
by
by