Jump to content
pconkie

Menus in sites

Recommended Posts

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...