[admin]

Hi,

To swap the arrows, you would need to edit these from the defaults:

/* Sub menu indicators
===================*/

	.sm-clean a span.sub-arrow {
		position:absolute;
		left:12px;
		top:50%;
		margin-top:-3px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:4px; /* tweak size of the arrow */
		border-style:solid dashed dashed dashed;
		border-color:#555 transparent transparent transparent;
	}
	.sm-clean-vertical a span.sub-arrow,
 	.sm-clean ul a span.sub-arrow {
		right:15px;
		top:50%;
		margin-top:-5px;
		border-width:5px;
		border-style:dashed solid dashed dashed;
		border-color:transparent #555 transparent transparent;
	}

This would move the main and sub menu arrows to the left side of the item and also change the sub menu arrow point direction to the left.

And then if you want to be perfect, it would be nice to also swap the padding-right for padding-left declaration in all the a.has-submenu rules.

Cheers!

[admin]

Hi,

OK, please check now and let me know if you have any questions:

http://jsfiddle.net/3kJR6/10/

The exact code starts here after this comment:

/* Sub menu indicators
===================*/

Cheers!

[admin]

If the menu HTML structure is in the following file:

/home4/topshed/public_html/smartmenus/lhc_clean.php

you could use the following on your PHP pages (they need to have a .php extension too) to include it:

<?php
	include '/home4/topshed/public_html/smartmenus/lhc_clean.php';
?>

If this doesn’t work, then you have something else that is not correctly configured but, unfortunately, I cannot guess what exactly it might be without looking at a complete code sample.

[admin]

Hi, the simplest cross-browser solution would be to use some additional plugin. For example, use this one:

http://stickyjs.com/

Usage would be super simple – you will just need to include the JS file on your page and add this code to initialize it:

$(function() {
	$('#main-menu').sticky();
});

Let me know if you have any troubles.

Cheers!

[admin]

Please read carefully again what I wrote:

you need to edit the color declaration in the following rules

I just showed you the rules you need to edit, the colors you would like to use are up to you. If you need further help, please check the CSS spec.

You could use a server-side include for your menu structure so that you could keep it in a single separate file. For example, in PHP it could be achieved via the include function. If your server supports other server-side languages, please check how you could do it with those.

[admin]

Hi, I just tested SmartMenus 0.9.5 on the default demo page of FlexSlider v2.2.2 and it works just fine. Please double check whether you are including the script files on your page correctly (e.g. if you are not including jQuery twice, if you are including both scripts correctly, etc.)

If you are still having troubles, please post a link to a live example and I will take a look.

Cheers!

[admin]

Hi, you need to edit the color declaration in the following rules:

/* Menu items
===================*/

	.sm-clean a {
		padding:12px;
		color:#555;
		font-size:18px;
		line-height:17px;
		font-family:'Lucida Sans Unicode','Lucida Sans','Lucida Grande',Arial,sans-serif;
		text-decoration:none;
	}
	.sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active,
	.sm-clean a.highlighted {
		color:#D23600;
	}

	/* ... */

	.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active,
	.sm-clean ul a.highlighted {
		color:#D23600;
		background:#eee;
	}
	/* current items - add the class manually to some item or check the "markCurrentItem" script option */
	.sm-clean a.current, .sm-clean a.current:hover, .sm-clean a.current:focus, .sm-clean a.current:active {
		color:#D23600;
	}

Also possibly the responsive styles further down in “sm-clean.css”:

/* Menu items
===================*/

	.sm-clean a {
		padding:13px 5px 13px 28px !important;
		color:#555 !important;
		background:transparent !important;
	}
	.sm-clean a.current {
		color:#D23600 !important;
	}

As for the old styles in v6.0.4, they are defined in a completely different way in the JS config file so they are not compatible at all.

Cheers!

[admin]

Hi, here is how you could do it (there might be even a bit simpler way to achieve it but this is what came to my mind at the moment).

I think it makes sense to use the sub arrows (SPAN’s) as toggle elements since they are already there for us. You might just need to tweak their style on small screens – i.e. make them bigger and easier to hit, tweak their positions, etc. And then you need just the following additional JS ondomready:

var $mainMenu = $('#main-menu').on('click', 'span.sub-arrow', function(e) {
		// toggle the sub menu on sub arrow click in collapsible mode
		var obj = $mainMenu.data('smartmenus');
		if (obj.isCollapsible()) {
			var $item = $(this).parent(),
				$sub = $item.parent().dataSM('sub'),
				subIsVisible = $sub.dataSM('shown-before') && $sub.is(':visible');
			$sub.dataSM('arrowClicked', true);
			obj.itemActivate($item);
			if (subIsVisible) {
				obj.menuHide($sub);
			}
			e.stopPropagation();
			e.preventDefault();
		}
	}).bind({
		// don't show the sub menu in collapsible mode unless the sub arrow is clicked
		'beforeshow.smapi': function(e, menu) {
			var obj = $mainMenu.data('smartmenus');
			if (obj.isCollapsible()) {
				var $menu = $(menu);
				if (!$menu.dataSM('arrowClicked')) {
					return false;
				}
				$menu.removeDataSM('arrowClicked');
			}
		},
		'show.smapi': function(e, menu) {
			$(menu).dataSM('parent-a').children('span.sub-arrow').text('-');
		},
		'hide.smapi': function(e, menu) {
			$(menu).dataSM('parent-a').children('span.sub-arrow').text('+');
		}
	});

Please let me know if you have any questions.

Cheers!

[admin]

Hi, a couple of things to fix:

1) jQuery and SmartMenus jQuery are not properly included on you page at the moment. Replace the following:

<!-- jQuery Loader -->
<script type="text/javascript" src="/smartmenus/libs/jquery-loader.js"></script>

with this:

<script type="text/javascript" src="/smartmenus/libs/jquery/jquery.js"></script>
<script type="text/javascript" src="/smartmenus/jquery.smartmenus.min.js"></script>

2) Your menu structure is not valid – you have some missing closing tags, etc. Here is how your valid structure looks:

<ul id="main-menu" class="sm sm-clean">
  <li><a href="http://www.britishsteam.com/">Home</a></li>
  <li><a href="http://www.britishsteam.com/about/">About</a>
    <ul>
      <li><a href="http://www.britishsteam.com/php_lms/usr_links.php">Links</a></li>
      <li><a href="http://www.britishsteam.com/odds/biblio.php">Bibliography</a></li>
      <li><a href="http://britishsteam.com/">Contact</a></li>
      <li><a href="http://www.britishsteam.com/Guestbook/gbook.php">Guest Book</a></li>
      <li><a href="http://www.britishsteam.com/php_lms/usr_whatnew.php/">What's New</a></li>
    </ul>
  </li>
  <li><a href="http://www.britishsteam.com/">BR Standards</a>
    <ul>
      <li><a href="http://www.britishsteam.com/php_br/user_br.php/">BR Data</a></li>
      <li><a href="http://www.britishsteam.com/br_std/4-6-0/4-6-0frame.htm/">4-6-0</a></li>
      <li><a href="http://www.britishsteam.com/br_std/4-6-2/4-6-2frame.htm/">4-6-2</a></li>
      <li><a href="http://www.britishsteam.com/br_std/9F/9Fframe.htm/">2-10-0</a></li>
      <li><a href="http://www.britishsteam.com/br_std/tanks/tankframe.htm/">Tanks</a></li>
    </ul>
  </li>
  <li><a href="http://www.britishsteam.com/GWR/">GWR</a>
    <ul>
      <li><a href="http://www.britishsteam.com/gwr_php/usr_gwr.php">GWR Data</a></li>
      <li><a href="http://www.britishsteam.com/gwr/tender/gwrframe.htm/">Tender Gallery</a></li>
      <li><a href="http://www.britishsteam.com/gwr/tankdframe.htm">Tanks Gallery</a></li>
    </ul>
  </li>
  <li><a href="http://www.britishsteam.com/LMS/">LMS</a>
    <ul>
      <li><a href="http://www.britishsteam.com/php_lms/usr_lms.php">LMS Stock list</a></li>
      <li><a href="http://www.britishsteam.com/lms/0-4-0/0-4-0frame.htm">0-4-0 Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lms/0-6-0/0-6-0frame.htm">0-6-0 Gallery</a></li>      
      <li><a href="http://www.britishsteam.com/lms/0-6-0T/0-6-0T-frame.htm">0-6-0T Gallery</a></li> 
      <li><a href="http://www.britishsteam.com/lms/2-6-0/2-6-0frame.htm">2-6-0 Gallery</a></li>    
      <li><a href="http://www.britishsteam.com/lms/0-6-0T/0-8-0frame.htm">2-8-0 Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lms/4-4-0/440frame.htm">4-4-0 Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lms/4-6-0/460frame.htm">4-6-0 Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lms/4-6-2/462frame.htm">4-6-2 Gallery</a></li>
    </ul>
  </li>
  <li><a href="http://www.britishsteam.com/LNER/">LNER</a>
    <ul> 
      <li><a href="http://www.britishsteam.com/php_lner/usr_lner.php">LNER Engines</a></li>
      <li><a href="http://www.britishsteam.com/php_lner/usr_railcars.php">LNER Railcars</a></li>       
      <li><a href="http://www.britishsteam.com/lner/0-4-0/040frame.htm">0-4-0 Gallery</a></li> 
      <li><a href="http://www.britishsteam.com/lner/0-6-0T/060framet.htm">0-6-0T Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lner/0-6-2T/060framet.htm">0-6-2T Gallery</a></li>     
      <li><a href="http://www.britishsteam.com/lner/2-6-0/260frame.htm">2-6-0 Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lner/2-6-2/262frame.htm">2-6-2 Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lner/2-8-0/080frame.htm">2-8-0 Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lner/4-4-0a/440aframe.htm">4-4-0A Gallery</a></li> 
      <li><a href="http://www.britishsteam.com/lner/4-4-0b/440bframe.htm">4-4-0B Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lner/4-4-2/442frame.htm">4-4-2 Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lner/4-6-0/460frame.htm">4-6-0 Gallery</a></li>
      <li><a href="http://www.britishsteam.com/lner/A1/A1frame.htm">A1 Gallery</a></li>     
      <li><a href="http://www.britishsteam.com/lner/A2/A2frame.htm">A2 Gallery</a></li>  
      <li><a href="http://www.britishsteam.com/lner/A3/A3frame.htm">A3 Gallery</a></li>       
      <li><a href="http://www.britishsteam.com/lner/A4/A4frame.htm">A4 Gallery</a></li>       
      <li><a href="http://www.britishsteam.com/lner/Railcar/RCframe.htm">Railcar Gallery</a></li>  
    </ul>
  </li>  
  <li><a href="http://www.britishsteam.com/Southern/">Southern Engines</a>
    <ul> 
      <li><a href="http://www.britishsteam.com/php_sr/usr_sr.php">LNER Engines</a></li>
      <li><a href="http://www.britishsteam.com/sr/tender/tendframe.htm">Tender Gallery</a></li>
      <li><a href="http://www.britishsteam.com/sr/srPacific/462frame.htm">Pacifics Gallery</a></li>
      <li><a href="http://www.britishsteam.com/sr/tanks/tankframe.htm">Tank Gallery</a></li>
    </ul>
  </li>
  <li><a href="http://www.britishsteam.com/WD/">WD Engines</a>
    <ul>
      <li><a href="http://www.britishsteam.com/php_wd/usr_rods.php">ROD's</a></li>
      <li><a href="http://www.britishsteam.com/php_wd/usr_8F.php">8F's</a></li>
      <li><a href="http://www.britishsteam.com/php_wd/usr_riddles.php">Riddles</a></li>
      <li><a href="http://www.britishsteam.com/php_wd/usr_J94.php">J94's</a></li>
      <li><a href="http://www.britishsteam.com/wd2/wdframe.htm">D Gallery</a></li>
    </ul>
  </li>
  <li><a href="http://www.britishsteam.com/WD/">Shed Book</a>
    <ul>
      <li><a href="http://www.britishsteam.com/php_shed/usr_sheds.php">Steam Sheds</a></li>
    </ul>
  </li>
  <li><a href="http://www.britishsteam.com/Anoraks">Anoraks</a>
    <ul> 
      <li><a href="http://www.britishsteam.com/anoranks/lner.php">LNER</a></li>
      <li><a href="http://www.britishsteam.com/anoranks/johnr.php">John</a></li>
      <li><a href="http://www.britishsteam.com/anoranks/drapers.php">Drapers</a></li>
    </ul>
  </li>
</ul>

Cheers!

[admin]

Hi, here is one way to do it:

1) Set an id e.g. “iframe2” to your second iframe where the links should be loaded.

2) Add the following JS in your first iframe where the menu is:

$(function() {
	$('#main-menu').bind('select.smapi', function(e, item) {
		var iframe2 = parent.document.getElementById('iframe2');
		if (iframe2) {
			iframe2.src = item.href;
		}
		return false;
	});
});

That’s all and it would affect all your menu links.

[admin]

Hi,

You need to edit the following CSS:

/* Sub menu indicators
===================*/

	.sm-clean a span.sub-arrow {
		position:absolute;
		right:12px;
		top:50%;
		margin-top:-3px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:4px; /* tweak size of the arrow */
		border-style:solid dashed dashed dashed;
		border-color:#555 transparent transparent transparent;
	}
	.sm-clean-vertical a span.sub-arrow,
	.sm-clean ul a span.sub-arrow {
		right:15px;
		top:50%;
		margin-top:-5px;
		border-width:5px;
		border-style:dashed dashed dashed solid;
		border-color:transparent transparent transparent #555;
	}

to something like this:

/* Sub menu indicators
===================*/

	.sm-clean a span.sub-arrow {
		position:absolute;
		right:12px;
		top:50%;
		margin-top:-5px;
		width:10px;
		height:10px;
		overflow:hidden;
		background:url('___YOUR_BG_IMAGE___');
	}
	.sm-clean-vertical a span.sub-arrow,
	.sm-clean ul a span.sub-arrow {
		right:15px;
		top:50%;
		margin-top:-5px;
	}

And also you may want to check/tweak the following options:

subIndicators:         true,
subIndicatorsPos:     'prepend',
subIndicatorsText:    '+',

Cheers!

[admin]

Hi,

Yes, of course, feel free to do that if you like. Just save the page with whatever browser you use. The script is completely free so I am quite surprised you thought the docs might not be. 🙂

Cheers!

[admin]

For me changing the width in the media query I mentioned does take effect (just tested in Chrome/Mac). Do you have the problem just on the Surface? And if yes in which browser/version?

[admin]

Hi, as far as I can see, at the moment it’s toggled at 700px so I guess you’ve fixed it? The media query with the break point is in:

http://zachmcdonald.net/2014/css/sm-clean.css

[admin]

Hi, please follow the quick setup instructions in the manual:

http://www.smartmenus.org/docs/#quick-setup

and you can also use the demo page source in the download package as a reference. If these are not easy enough for you, then, unfortunately, I doubt you’d be able to configure the script on your own.

[admin]

Hi! Thanks for the thumbs up, happy to hear you like the script! 🙂

You can achieve it via CSS.

I) For example, you could use the following if you have just mega sub menus (one level):

#main-menu, #main-menu > li  {
	position:static !important;
}
#main-menu > li > ul {
	margin-left:0 !important;
	right:0 !important;
	width:auto !important;
	max-width:none !important;
}

This would make all your sub menus take the full page width (or the full width of any positioned parent element of your menu tree if there is one).

II) If you’d like the sub menus to take the full width of your main menu, you could use this:

#main-menu > li  {
	position:static !important;
}
#main-menu > li > ul {
	margin-left:0 !important;
	right:0 !important;
	width:auto !important;
	max-width:none !important;
}

III) And if you want just your mega sub menus to take full page width and still have other regular sub menus, you will need to add a class to the parent LIs of your mega menu – e.g.:

<li class="mega-menu"><a href="#">Menu item</a>
    <ul class="mega-menu">...

and then use the following CSS:

#main-menu, #main-menu > li.mega-menu  {
	position:static !important;
}
#main-menu > li > ul.mega-menu {
	margin-left:0 !important;
	right:0 !important;
	width:auto !important;
	max-width:none !important;
}

I hope this helps. Let me know if you have any troubles.

Cheers!

[admin]

The paths in requirePathsConfig.js seem to be wrong – you don’t include “lib/” at all. Then your “copy” function does funky but incorrect stuff and also produces a JS error.

Here is my suggestion how to fix the issues:

1) Assuming you use any of these on your pages (not very sure from your explanation which exactly you use):

<script type="text/javascript" data-main="js/lib/requirePathsConfig" src="js/lib/requirejs-2.1.2.js"/></script>

or:

<script type="text/javascript" src="js/lib/requirejs-2.1.2.js"/></script>
<script type="text/javascript" src="js/lib/requirePathsConfig.js"/></script>

2) Replace the content of your current requirePathsConfig.js with the following:

/* js/lib/requirePathsConfig.js */

(function(require) {

    if (!require) {
        return;
    }

    var context = "/" + location.pathname.split("/")[1] + "/";
    var web = context + "web/js/";
    var bl = context;

    require.config({
        baseUrl: web,
        paths : {
            /*
             * Paths lists the locations of particular scripts in web.
             * These will be used with the shim config option to setup dependencies for
             * each library.
             */

            jquery : "lib/jquery/jquery-1.7.2",
            // ** not using jquery.jqGrid-4.5.2 until fully tested with all Web features **
            jqGrid : "lib/jquery/plugins/webvisGridView/jquery.jqGrid-4.4.1/jquery.jqGrid.src", 
            jqGridLocale : "lib/jquery/plugins/webvisGridView/jquery.jqGrid-4.4.1/grid.locale-en",

            // Smartmenu stuff note, the different format
            "jquery.smartmenus" : "lib/jquery/jquery.smartmenus.min"
        },
        shim: {
            /* Hold the dependencies needed for each script. Designed to for 
             * RequireJS v2.0 or higher. Array holds the dependency requirements for each script    above. */

            "jquery.smartmenus": {
                deps: [ "jquery" ],
                exports: "jQuery.fn.smartmenus"
            },
            jqGridLocale: ["jquery", "jqUI"],
            jqGrid: ["jqGridLocale"]
        }
    });

    // load main.js
    require([web + "lib/jquery/main.js"]);

})(window.require);

and it should work assuming:

– you use the exact folder structure you mentioned;
– main.js has the exact content I mentioned in my previous post;
– you keep the main RequireJS code in js/lib/requirejs-2.1.2.js.

Hope this helps. Let me know if you still have any troubles.

[admin]

OK, unfortunately, I don’t have access to your code base so I cannot give you a clear answer what exactly might be wrong with your configuration but here is a quick example how you could include jQuery and some plugin (SmartMenus in our case) using RequireJS (this covers just the JS files, you still need to include the CSS files, etc.)

Let’s assume you have the following files:

/index.html
/js/require.config.js
/js/main.js
/js/lib/jquery-1.10.2.js
/js/lib/jquery.smartmenus.min.js
/js/lib/require.js

in “index.html” you need just the following script reference:

<script data-main="js/require.config" src="js/lib/require.js"></script>

The content of /js/require.config.js:

requirejs.config({
    "baseUrl": "js/lib", // you may need to change this when running on a server to something like '/js/lib'
    "paths": {
        "jquery": "jquery-1.10.2",
        "jquery.smartmenus": "jquery.smartmenus.min"
    },
    shim: {
        // tell RequireJS that SmartMenus needs to be loaded after jQuery
        "jquery.smartmenus": {
            deps: [ "jquery" ],
            exports: "jQuery.fn.smartmenus"
        }    
    }
});

// Load main
requirejs(["../main"]);

The content of /js/main.js:

define(["jquery", "jquery.smartmenus"], function($) {
    // jquery.smartemnus.min.js has been loaded so init the menu
    $(function() {
        $('#main-menu').smartmenus({
            subMenusSubOffsetX: 1,
            subMenusSubOffsetY: -8
        });
    });
});

And the files in /js/lib/ are the plain jQuery, SmartMenus jQuery and RequireJS files.

Hope this helps. If you have any further issues, please provide me with some sort of access to your code base so that I could test and try to find out what could be wrong.

Cheers!

[admin]

Hi, the problem seems to be that your columns DIVs in the mega menu are not properly cleared on mobile and your mega menu gets 1px computed height. You could clear them, for example, by adding overflow:hidden; to the parent DIV – e.g.:

<div style="width:62em">
<div style="overflow:hidden"> ...

Cheers!

[admin]

Hi, np at all! Right to your questions:

1) You could use this:

.sm-clean > li > a img {
    vertical-align:top;
    border:0; /* for IE's sake */
}

2) You could, for example, add some left margin to your “Full Extent” item – e.g. in the HTML:

<li id="menu-item-full-extent">...

and in the CSS:

#menu-item-full-extent {
    margin-left:50px;
}

Or add the margin to the divider SPAN you use, if you still would like to have it before the item. Or you could even float the item LIs to left if you like. There are different approaches.

3) When you add the first fix for the icons, you will automatically get 40px height for the main menu items, so you can remove the additional setting you’ve added. But to answer your question, it’s best to control the main menu height via the items (the links) – i.e. you can tweak their padding-top, padding-bottom and line-height in pixels if you like. The main menu box will automatically grow in height for them.

Cheers!

[admin]

OK, np! Cheers!

[admin]

Can you post an example where it doesn’t work like that?

Because on the default demo page when the viewport width is less than 640px the sub menus become collapsible and push everything down instead of being displayed as a layer on top of the content.

[admin]

Np, cheers!

[admin]

Hi,

The problem seems to be that jQuery is not properly included on your page. So just replace the following:

<script type="text/javascript" src="jquery-loader.js"></script>

with something like:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

(or you could, of course, use a local copy of jQuery hosted on your server).

The loader script is just used on the demo page to allow easy testing with different jQuery versions.

Cheers!

[admin]

Hi Jay! You could either use the following option subMenusMaxWidth: '' (hmm, maybe we should consider this as default instead of subMenusMaxWidth: '20em' which is used now) or if you would like to remove the max-width just for the mega sub menus, you could use the following rule:

ul.mega-menu {
	max-width:none !important;
}

Cheers!

PS: After that you custom width settings will take effect.

[Author]

Posts