Jump to content

Menus in sites

pconkie

By pconkie
in Coding

 Share

Recommended Posts

pconkie Mentor

pconkie

Posted
Posted

Is there some jquery or css that will display the 'regular' desktop site menu on large touch devices like iPads?

Basically I would like an iPad to behave like a desktop browser, which I believe would mean displaying the regular menu in portrait (>800px) and collapsing to the mobile friendly menu in landscape (<800px).  Phones should not be affected. It would seem that the screen size specified in the frog css file for switching the menus is overridden if a touch device is detected - does this mean that no matter how much screen space I have all touch devices will show the mobile friendly menu? It makes the site look somehow out of proportion on these devices and is putting me off moving the school website to frog.

Thanks

Paul

Link to comment
Share on other sites
Graham Quince Grand Frogger

Graham Quince

Posted
Posted

Hi @pconkie,

Unfortunately, the touch events are built into the codebase, but it is possible to bypass this with a custom theme.  The code below is an earlier iteration of the mobile menus, which does not include touch events:

  

<style>

/* Navigation
----------------------------------------------- */

/* LARGE SCREEN - Navigation */

.ui-theme-mobilesmallbanner  a.menu-icon {
  display: none;
}
.ui-theme-mobilesmallbanner  .menu-action {
  position: static;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.ui-theme-mobilesmallbanner  .main-menu {
    clear: both;
    display: block;
    text-align: right;
    width:100%;
	margin:0px auto;
	padding:0px;
}
.ui-theme-mobilesmallbanner  .main-menu li,
.ui-theme-mobilesmallbanner  .main-menu a {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: content-box;
  background: none;
  list-style: none;
  text-decoration: none;
  position: relative;
  display:inline-block;
}

.ui-theme-mobilesmallbanner  .main-menu ul {
     display: block;
	list-style: none;
    margin: 0px;
    padding: 0px;
	 width:100%;
     background: none;
    -webkit-transition: height .5s linear;
    -moz-transition: height .5s linear;
    -ms-transition: height .5s linear;
    -o-transition: height .5s linear;
    transition: height .5s linear;
  }
  
.ui-theme-mobilesmallbanner  .main-menu ul ul, .ui-theme-mobilesmallbanner  .main-menu ul ul ul {
    margin: 0 0 0 0!important;
	padding: 0px 0 0px 0px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.ui-theme-mobilesmallbanner  .main-menu ul {
  list-style: none;
}
.ui-theme-mobilesmallbanner  .main-menu > ul {
  width: 100%;
  z-index: 99;
}
.ui-theme-mobilesmallbanner  .main-menu > ul > li {
  
}
.ui-theme-mobilesmallbanner  .main-menu > ul li:hover > ul {
  display: block;
}


.ui-theme-mobilesmallbanner  .main-menu > ul li a {
	font-family: 'TitilliumWeb-Regular', Arial, "Gill Sans", "Gill Sans MT", Helvetica,  "Myriad Pro", "DejaVu Sans Condensed", sans-serif;
	font-size: 14px;
    font-weight: normal;
	line-height: 15px;
  	color: #ffffff;
	text-align:center;
    margin: 0px 15px 5px 0px;
   	padding:20px 27px;
    border-style: solid;
    border-width: 0px 0px 2px 0px;
    border-color: rgba(255,255,255,0.2);
}  
.ui-theme-mobilesmallbanner  .main-menu ul li:hover > a, 
.ui-theme-mobilesmallbanner  .main-menu ul li.parentselected > a,
.ui-theme-mobilesmallbanner  .main-menu ul li.selected > a   {
	color:#ffffff;
	background-color: none;
	font-weight:bold;
	border-style: solid;
    border-width: 0px 0px 2px 0px;
    border-color: rgba(255,255,255,0.7);
	transition: border-color 0.7s ease;
}
.ui-theme-mobilesmallbanner  .main-menu > ul li ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
  z-index: 99;
  border-bottom: none;
}
.ui-theme-mobilesmallbanner  .main-menu > ul li ul li {
	display:block;
}
.ui-theme-mobilesmallbanner  .main-menu > ul li ul li a {
	font-size: 13px;
	line-height: 14px;
   	padding:13px 5px;
	margin:0px 5px;
	border:none;
	background: url('<%=DIR%>subdevider.png') center bottom no-repeat;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}
.ui-theme-mobilesmallbanner  .main-menu ul ul a {	
	width:calc(100% - 20px);
}
.ui-theme-mobilesmallbanner  .main-menu ul ul {	
    transition: background-color .5s ease-in-out;
	left:none;
	background-color: rgba(0, 0, 0, 0.45);
    display: none;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
    z-index: 99;
}
.ui-theme-mobilesmallbanner  .main-menu > ul li ul li:hover > a,
.ui-theme-mobilesmallbanner  .main-menu > ul li ul li.parentselected > a,
.ui-theme-mobilesmallbanner  .main-menu > ul li ul li.selected > a  {
	color:#ffffff;
	border: none;
	font-weight:bold;
	border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: rgba(255,255,255,0.6);
	border-radius: 0px 0px 0px 0px;
	-moz-border-radius: 0px 0px 0px 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
}

.ui-theme-mobilesmallbanner  .main-menu ul ul.ui-sortable > li:nth-last-child(2) {
	padding-bottom:5px;
	border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
} 
.ui-theme-mobilesmallbanner  .main-menu ul ul.ui-sortable > li:last-child  {
	padding-bottom:5px;
	border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
} 

.ui-theme-mobilesmallbanner  .main-menu > ul li li:hover > ul {
  display: block;
}
.ui-theme-mobilesmallbanner  .main-menu > ul li li ul {
  display: none;
  position: absolute;
  left: 100%;
}
.ui-theme-mobilesmallbanner  .main-menu ul ul ul {
    left: 100%;
    top: 0px;
}
.ui-theme-mobilesmallbanner  .main-menu > ul li li ul li:hover > a,
.ui-theme-mobilesmallbanner  .main-menu > ul li li ul li.selected > a  {


}

.ui-theme-mobilesmallbanner  .main-menu a {
  color: #ffffff;
  display: inline-block;
  padding: 15px 20px;
  text-decoration: none;
}
.ui-theme-mobilesmallbanner  span.cnt {
  display: none;
}

/* SMALLER SCREEN CSS */

@media screen and (max-width: 800px) {

.ui-theme-mobilesmallbanner-container {
	position: absolute;
	height: 100%;
    width: 100%;
	overflow: hidden;
}

  .ui-theme-mobilesmallbanner a.menu-icon {
  	height: 35px;
	width: 35px;
	background:url('<%=DIR%>menuopen.png') right top no-repeat;
	font-size:0;
    display: block;
    position: absolute;
    z-index: 99999;
    top: 25px;
    right: 35px;
  }
    .ui-theme-mobilesmallbanner  .menu-icon.active {
	background:url('<%=DIR%>menuclose.png') right top no-repeat;
  }
  
  .ui-theme-mobilesmallbanner  .menu-action {
    position: absolute;
	background-color: rgba(0, 0, 0, 0.75);
    right: -290px;
    width: 280px;
    top: 0;
    bottom: 0;
    z-index: 101;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
  }
  .ui-theme-mobilesmallbanner  .menu-action.active {
    max-height: 100%;
    right: 0;
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu {
    top: 0;
    right: 0;
	bottom: 0;
    height: 100%;
	background-color: none;
	margin:0 0px 0 0px;
	padding:0px 0px 0px 0px;
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu .menu-level-1 {
    padding-top: 90px;
	padding-bottom: 45px;
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul,
  .ui-theme-mobilesmallbanner  .menu-action .main-menu li,
  .ui-theme-mobilesmallbanner  .menu-action .main-menu a {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    position: relative;
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul li {
     display: block;
	 width:100%;
    -webkit-transition: height .5s linear;
    -moz-transition: height .5s linear;
    -ms-transition: height .5s linear;
    -o-transition: height .5s linear;
    transition: height .5s linear;
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul li:hover:after,
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul li.selected:after {
    border: none;
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul li a {
  	font-family: 'TitilliumWeb-Regular', Arial, "Gill Sans", "Gill Sans MT", Helvetica,  "Myriad Pro", "DejaVu Sans Condensed", sans-serif;
	font-size: 14px;
    font-weight: normal;
	line-height: 15px;
  	color: #ffffff;
	text-align:left;
    margin: 0px 10px 0px 10px;
   	padding:10px 10px;
    border-style: solid;
    border-width: 0px 0px 2px 0px;
    border-color: rgba(255,255,255,0.2);
    background: none;
    display: block;
	width:calc(100% - 40px);
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul li:hover > a, 
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul li.parentselected > a,
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul li.selected > a {
  	color:#ffffff;
	background-color: none;
	font-weight:bold;
	border-style: solid;
    border-width: 0px 0px 2px 0px;
    border-color: rgba(255,255,255,0.7);
	transition: border-color 0.7s ease;
  }

  .ui-theme-mobilesmallbanner  .menu-action .main-menu span.cnt {
    position: absolute;
    padding: 0;
    margin: 0;
    background: none;
    display: block;
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul {
    display: none;
 	width: 100%;
    position: static;
	background-color: none!important;
	background: none!important;
		border-radius: 0px 0px 0px 0px!important;
	-moz-border-radius: 0px 0px 0px 0px!important;
	-webkit-border-radius: 0px 0px 0px 0px!important;
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul li {
    background-color: none!important;
	background: none!important;
    border-bottom: none;
	margin:0px 0px 0 0px;
	width:calc(100% - 15px);
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul li:hover > a, 
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul li.parentselected > a,
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul li.selected > a {
    text-decoration: none;
	color:#ffffff;
	border: none;
	font-weight:bold;
	background:url('<%=DIR%>listicon20-o.png') left center no-repeat;
	border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: rgba(255,255,255,0.6);
	border-radius: 0px 0px 0px 0px!important;
	-moz-border-radius: 0px 0px 0px 0px!important;
	-webkit-border-radius: 0px 0px 0px 0px!important;
  }
    .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul li a {
	font-size: 13px;
	line-height: 14px;
    text-align: left;
	background:url('<%=DIR%>listicon20.png') left center no-repeat;
    color: #ffffff;	
    padding: 10px 10px 10px 25px;
	margin:0px 10px 0 10px;
    display: block;
	border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: rgba(255,255,255,0.2);
	border-radius: 0px 0px 0px 0px!important;
	-moz-border-radius: 0px 0px 0px 0px!important;
	-webkit-border-radius: 0px 0px 0px 0px!important;
  }

  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul.ui-sortable > li:nth-last-child(2) {
	padding-bottom:0px!important;
	border-radius: 0px 0px 0px 0px!important;
	-moz-border-radius: 0px 0px 0px 0px!important;
	-webkit-border-radius: 0px 0px 0px 0px!important;
} 
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul.ui-sortable > li:last-child  {
	padding-bottom:0px!important;
	border-radius: 0px 0px 0px 0px!important;
	-moz-border-radius: 0px 0px 0px 0px!important;
	-webkit-border-radius: 0px 0px 0px 0px!important;
}

 .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul ul {
    display: none;
 	width: 100%;
    position: static;
		border-radius: 0px 0px 0px 0px!important;
	-moz-border-radius: 0px 0px 0px 0px!important;
	-webkit-border-radius: 0px 0px 0px 0px!important;
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul ul li {
    background: none;
    border-bottom: none;
	margin:0px 0px 0 0px;
	width: calc(100% - 10px);
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul ul li:hover > a, 
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul ul li.selected > a {
	background:url('<%=DIR%>listicon30-o.png') left center no-repeat;
  }
  .ui-theme-mobilesmallbanner  .menu-action .main-menu ul ul ul li a {
	background:url('<%=DIR%>listicon30.png') left center no-repeat;
    padding: 10px 10px 10px 35px;
  }

/* END MENU CSS - Navigation */	
</style>
	

	
/* MAIN CONTAINER NEEDS THE UNIQUE TAG <%= unique %>" AS SHOWN BELOW */	
<div class="ui-theme-mobilesmallbanner-container theme-container <%= unique %>">
	/* PLACE OTHE HTML WITHIN THIS AREA */
</div>
/* End Main Container */
	
	

	/* Menu HTML CSS */
        <a class="menu-icon"></a>
            <div class="menu-nav menu-action">
                <div data-attr="site-menu" data-level="full" class="main-menu"></div>
            </div><!-- /menu -->	
	/* END MENU HTML CSS */
	
	
	/* jAVASCRIPT NEEDED BELOW TO MAKE THE MENU WORK */	
<%
$(function() {
    var init,
        tryFindTheme = function() {
            var exists = !!$('.'+ unique + '.ui-theme-mobilesmallbanner-container').length;

            if (!exists) {
                setTimeout(function() {
                    tryFindTheme();
                }, 100);
                return;
            }

            init();
        };

    tryFindTheme();

    init = function() {
        var handleLargeScreen,
            handleSmallScreen,
            smallScreenBoundary = 800,
            menu = $('.'+ unique + ' .main-menu'),
            length,
            parent,
            countWrapper = '<span class="cnt"></span>',
            item,
            submenu,
            themeWrapper = $('.'+ unique + '.ui-theme-mobilesmallbanner-container');

        handleLargeScreen = function(){
        };

        handleSmallScreen = function(){



            themeWrapper.delegate('a.menu-icon','click',function(ev){
                $(this).toggleClass('active');
                $(this).siblings('.menu-action').toggleClass('active');
            });
        };

        setTimeout(function() {
            if( $(window).width() > smallScreenBoundary ) {
                handleLargeScreen();
            } else {
                handleSmallScreen();
            }

            $(window).resize(function(){
                $('.'+ unique + '.ui-theme-mobilesmallbanner-container').undelegate('a.menu-icon','click');

                if( $(window).width() > smallScreenBoundary ) {
                    handleLargeScreen();
                } else {
                    handleSmallScreen();
                }
            });
        },100);

    }
});
%>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...