Responsive multi menu - horizontal

[suhy]

If you have a responsive osommerce this might come handy ..

I was looking for some better solution for a responsive multi level menu and have put together a nice working solution using http://responsivemultimenu.com/ as a base.

 

My template uses horizontal navbar and left categorry box menu. The box category is hidden in mobile responsive view and navbar menu kicks in with responsive layout.

You can use it even if you dont normaly use navbar menu, just hide it for big screens and switch for responsive view in your css ...

 

If you want to check it on live store with multi level categorries :

http://www.repa.si/shop/index.php/language/en

 

Read on if you liked it ...

 

1 Unzip and Upload attached files

 

2. includes/template_top.php - insert the followin in the head section:

<!-- responsive menu  -->
<script type="text/javascript" src="ext/responsivemenu/js/responsivemultimenu-<?php echo LANGUAGE_CODE; ?>.js"></script>
<link rel="stylesheet" href="ext/responsivemenu/css/responsivemultimenu.css" type="text/css"/>

3. includes/header.php - You will probably put in in your header section. Find a place for a menu and copy the following code in it. You can modify it for adittional links or remove some that are already configured ..

<!-- menu start -->		 
  		<div class="rmm style">
			<ul>
			
				<li>
					<a href="index.php"><?php echo TEXT_STORE; ?></a>
					<ul>
						<li>
							<a href="<?php echo tep_href_link('products_new.php')?>"><?php echo BOX_HEADING_WHATS_NEW; ?></a>
						</li>
						<li>
							<a href="<?php echo tep_href_link('specials.php')?>"><?php echo BOX_HEADING_SPECIALS; ?></a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#"><?php echo TEXT_CATEGORIES; ?></a>
								
					<?php
					if ( file_exists(DIR_WS_MODULES.'cat_navbar_responsive.php') ) {
					require(DIR_WS_MODULES.'cat_navbar_responsive.php');
						}
					?>
					
				<!-- </li> closes in cat_navbar_responsive.php -->	
				
				<li>
					<a href="<?php echo $acc_link; ?>"><?php echo $acc_title; ?></a>
				</li>
				<li>
					<a href="<?php echo tep_href_link('contact_us.php'); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a>
				</li>
			</ul>
		</div> <!-- menu end --> 

4. While my java is not the best I used an easy shortcut for changing two language strings in js file as you can see from calling a responsivemenu.js in header section ..

 

So you need to add also the following in your main language file; english.php, etc ..

 

add:

// language code - for some java script switching
define ('LANGUAGE_CODE','en');

5. Should be working now ...

 

I needed to modify the original responsivemenu.js with jQuiry.noConflict() for my shop ...

Also changed some basic css from original, see above link for example ..

 

- cat_navbar_responsive.php - new file; is made on superfish navbar horizontal example. I stripped out all no needed css classes, so we get a pure <ul><li> list as an output.

You can configure 2 additional classes in the settings section of the file if needed, read instruction in the head of the file ...

 

In ext/responsivemenu/js/responsivemenu-en.js

 

Copy it to a new file with LANGUAGE_CODE extension you defined above and find 2 strings in the file; "MENU" and "back" and change it to fit your language ..

 

 

Have fun,

Gregor

responsive menu oscommerce.zip

[♥mattjt83]

This can all be accomplished via header_tags/content modules. You should look at making your addon in a modular fashion as to avoid your core code changes (your changes in header.php and template_top.php). Also, your link to index.php should be using the tep_href_link() function. I didn't look at the cat_navbar_responsive.php file but it may need adjustments as well.