[Pro] Css Menu load

I have a jquery SlideOut Tab on my page and when its open and I draw my browser window smaller the CSS Menu is on top of my SlideOut Tab. Is there a way to fix this issue so that the Css Menu is behind?

Thanks

http://www.smartytest.com/Wren


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Don’t get me wrong, but in my opinion this is exactly how it’s supposed to work. When I -as a visitor- navigate to/through the menu, the slide-out no longer is of any interest for me. It covering the menu while I want to use the menu to go somewhere else just is annoying … right? Or am I missing something?

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes you are missing something. On smaller devices, iPad, iPhone, the SlideOut is behind the Css Menu. So you can see the menus choices as well as the other links on the SlideOut are all jumbled together. A real mess and difficult on touch devices.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This worked:

z-index: 9999; /– Added z-index –/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Strange, tests here with viewport widths 320/480/640/768/1024 didn’t show any overlapping issue …


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Because I added some z-index to the SlideOut div.

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay … so now at viewport width of 640-768px it covers the menu or submenu when it’s maximized. Still don’t see the upside here, so now you force visitors to first minimize the ‘buy me here’ slide in order to properly use the navigation?

You could consider a full width vertical slide that pushes down the page’s content when maximized (like a kind of an accordion menu) … it keeps everything still visible, out of each others’ way and not cluttered at all.

http://fwdemo.rvanheukelum.com/159128-css-menu-load/index.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Very Nice Solution. Let me ponder.
Thank you.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can you send me the Freeway file or the code that you used?

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s probably going to be tonight, I’m out for the rest of the day, sorry :slight_smile:

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok Thanks.
Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This should do it. It’s just a raw setup and can adjust whatever you like …

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Richard, I’ve just found this post and have been playing around with adding further accordion items inside the original accordion, see example page: http://www.stundesign.co.uk/bickhambarn/new/test-two.html.

I’ve been adding the extra accordion items directly into your original .js file and re numbering as foolows:

$(document).ready(function() {

$('.accordionButton').click(function() {

	$('.accordionButton').removeClass('on');
	  
 	$('.accordionContent').slideUp('normal');

	if($(this).next().is(':hidden') == true) {
		
		$(this).addClass('on');
		  
		$(this).next().slideDown('normal');
	 } 
	  
 });

$('.accordionContent').hide();

$('.accordionButton1').click(function() {

	$('.accordionButton1').removeClass('on');
	  
 	$('.accordionContent1').slideUp('normal');

	if($(this).next().is(':hidden') == true) {
		
		$(this).addClass('on');
		  
		$(this).next().slideDown('normal');
	 } 
	  
 });

$('.accordionContent1').hide();

$('.accordionButton2').click(function() {

	$('.accordionButton2').removeClass('on');
	  
 	$('.accordionContent2').slideUp('normal');

	if($(this).next().is(':hidden') == true) {
		
		$(this).addClass('on');
		  
		$(this).next().slideDown('normal');
	 } 
	  
 });

$('.accordionContent2').hide();

});

Is this the best way to be doing this? Also can I add some code that will make the ‘sub’ accordions slide shut rather than snap shut as they do now?

Thanks
Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

On 19 Apr 2016, 12:11 pm, Dave Dunning wrote:

Hi Richard, I’ve just found this post and have been playing around with adding further accordion items inside the original accordion, see example page: http://www.stundesign.co.uk/bickhambarn/new/test-two.html.

I’ve been adding the extra accordion items directly into your original .js file and re numbering as foolows:

$(document).ready(function() {

$(’.accordionButton’).click(function() {

  $('.accordionButton').removeClass('on');
  
  $('.accordionContent').slideUp('normal');

  if($(this).next().is(':hidden') == true) {
  	
  	$(this).addClass('on');
  	
  	$(this).next().slideDown('normal');
   } 

});

$(’.accordionContent’).hide();

$(’.accordionButton1’).click(function() {

  $('.accordionButton1').removeClass('on');
  
  $('.accordionContent1').slideUp('normal');

  if($(this).next().is(':hidden') == true) {
  	
  	$(this).addClass('on');
  	
  	$(this).next().slideDown('normal');
   } 

});

$(’.accordionContent1’).hide();

$(’.accordionButton2’).click(function() {

  $('.accordionButton2').removeClass('on');
  
  $('.accordionContent2').slideUp('normal');

  if($(this).next().is(':hidden') == true) {
  	
  	$(this).addClass('on');
  	
  	$(this).next().slideDown('normal');
   } 

});

$(’.accordionContent2’).hide();

});

Is this the best way to be doing this? Also can I add some code that will make the ‘sub’ accordions slide shut rather than snap shut as they do now?

Thanks
Dave

Hi Richard I’ve now completed my menu and all working a treat with five ‘sub’ accordions, script seems to work as it should. Also worked out the snapping shut issue, I’d not set the div’s to flexible height!

Thanks
Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

The mobile menu also appears on desktop view, is that correct?

I’ve used the breakpoints to show/hide different menu sets, which works just fine here (narrow browser window to see the effect):

I also worked on a coupe of other menu’s like:

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Nope it appears at a narrower breakpoint, desktop has a more traditional menu. I’ve got it set to slide down over the page rather than push as the client preferred it that way but I’ll implement push on another site I’m working on.

All those example are great; I’ve already downloaded your example of the slidepushnavigation that you posted elsewhere and am absorbing the details!

Really like your work and thanks as always for your advice and help.

Thanks
Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I love that second menu Richard. The one where the page seems to stack below. Did you do that entirely with freeway with some mark up?
Or is there some java running it?

Billy


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Simple question. How do I get my css menu to be on the front of my slide show? I select and the menu item for bring to the front is grayed out. On pages where I only have images, no problem.
Link below.
http://www.jrobinsondesign.com/slocomb/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

The styling in two.css is overruling the styling in index.css

in two

#navigation3.f-ms {
    width: 100%;
    z-index: 0;

In index

#navigation3 { height:auto; overflow:visible; position:relative; z-index:9999 }

Try adding

#navigation3.f-ms { z-index: 999 !important; }

In a style block in the before slot of Page>Html Markup;.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thanks David
I apologize for tagging onto this thread. had not realized I had done it.
John


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options