nucklearproject · January 3, 2013 01:16 · leecrossley · May 28, 2013
diff --git a/gistfile1.phtml b/gistfile1.phtml
 <?php 
 function user_agents(){
      $devices = array('iphone', 'android', 'ipad', 'iphone', 'blackberry');
      foreach ($devices as $ua) {
            $tsuac[] = (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), strtolower($ua))) ? 1 : 0;
          }
      return (in_array(1, $tsuac)) ? '.sftouchscreen()' : '';
  }
 ?>
 <html>
   <head>
      <style>
         body {font-family:arial; font-size:11px;}
         .clear {clear:both} 
         /* remove the list style */
         #nav {
               margin:0; 
               padding:0; 
               list-style:none;
         }   

         /* make the LI display inline */
         /* it's position relative so that position absolute */
         /* can be used in submenu */
         #nav li {
               float:left; 
               display:block; 
               width:100px; 
               background:#ccc; 
               position:relative;
               z-index:500; 
               margin:0 1px;
         }

         /* this is the parent menu */
         #nav li a {
               display:block; 
               padding:8px 5px 0 5px; 
               font-weight:700;  
               height:23px; 
               text-decoration:none; 
               color:#fff; 
               text-align:center; 
               color:#333;
         }

         #nav li a:hover {
               color:#fff;
         }

         /* you can make a different style for default selected value */
         #nav a.selected {
               color:#f00;
         }

         /* submenu, it's hidden by default */
         #nav ul {
               position:absolute; 
               left:0; 
               display:none; 
               margin:0 0 0 -1px; 
               padding:0; 
               list-style:none;
         }

         #nav ul li {
               width:100px; 
               float:left; 
               border-top:1px solid #fff;
         }

         /* display block will make the link fill the whole area of LI */
         #nav ul a {
               display:block;  
               height:15px;
               padding: 8px 5px; 
               color:#666;
         }

         #nav ul a:hover {
               text-decoration:underline;  
         }

         /* fix ie6 small issue */
         /* we should always avoid using hack like this */
         /* should put it into separate file : ) */
         *html #nav ul {
               margin:0 0 0 -2px;
            }      </style> 
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
         <script type="text/javascript">
            /*Sftouch*/
            (function($){
                  $.fn.sftouchscreen = function() {
                        // Return original object to support chaining.
                        return this.each( function() {
                              // Select hyperlinks from parent menu items.
                              $(this).find('li > ul').closest('li').children('a').each( function() {
                                    var $item = $(this);
                                    // No .toggle() here as it's not possible to reset it.
                                    $item.click( function(event){
                                          // Already clicked? proceed to the URI.
                                          if ($item.hasClass('sf-clicked')) {
                                                var $uri = $item.attr('href');
                                                window.location = $uri;
                                          }
                                          else {
                                                event.preventDefault();
                                                $item.addClass('sf-clicked');
                                          }
                                       }).closest('li').mouseleave( function(){
                                          // So, we reset everything.
                                          $item.removeClass('sf-clicked');
                                    });
                              });
                        });
                  };
            })(jQuery);

            $(document).ready(function () { 
                  $('#nav li').hover(
                     function () {
                           //show its submenu
                           $('ul', this).stop().slideDown(100);
                     }, 
                     function () {
                           //hide its submenu
                           $('ul', this).stop().slideUp(100);          
                     }
                  );
                  $('#nav')<?php echo user_agents(); ?>;

            });
         </script>
      </head>
      <body>
         <div id="menu">
            <ul id="nav">
               <li><a href="#">Parent 01</a></li>
               <li><a href="http://google.com">Google.com</a>
               <ul>
                  <li><a href="http://bing.com">Bing.com</a></li>
                  <li><a href="http://yahoo.com">Yahoo.com</a></li>
                  <li><a href="#">Item 03</a></li>
               </ul>
               <div class="clear"></div>
               </li>
               <li><a href="#">Parent 03</a>
               <ul>
                  <li><a href="#">Item 04</a></li>
                  <li><a href="#">Item 05</a></li>
                  <li><a href="#">Item 06</a></li>
                  <li><a href="#">Item 07</a></li>
               </ul>         
               <div class="clear"></div>
               </li>
               <li><a href="#">Parent 04</a></li>
            </ul>

            <div class="clear"></div>
         </div>
      </body>

   </html>
	<?php
	function user_agents(){
	$devices = array('iphone', 'android', 'ipad', 'iphone', 'blackberry');
	foreach ($devices as $ua) {
	$tsuac[] = (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), strtolower($ua))) ? 1 : 0;
	}
	return (in_array(1, $tsuac)) ? '.sftouchscreen()' : '';
	}
	?>
	<html>
	<head>
	<style>
	body {font-family:arial; font-size:11px;}
	.clear {clear:both}
	/* remove the list style */
	#nav {
	margin:0;
	padding:0;
	list-style:none;
	}

	/* make the LI display inline */
	/* it's position relative so that position absolute */
	/* can be used in submenu */
	#nav li {
	float:left;
	display:block;
	width:100px;
	background:#ccc;
	position:relative;
	z-index:500;
	margin:0 1px;
	}

	/* this is the parent menu */
	#nav li a {
	display:block;
	padding:8px 5px 0 5px;
	font-weight:700;
	height:23px;
	text-decoration:none;
	color:#fff;
	text-align:center;
	color:#333;
	}

	#nav li a:hover {
	color:#fff;
	}

	/* you can make a different style for default selected value */
	#nav a.selected {
	color:#f00;
	}

	/* submenu, it's hidden by default */
	#nav ul {
	position:absolute;
	left:0;
	display:none;
	margin:0 0 0 -1px;
	padding:0;
	list-style:none;
	}

	#nav ul li {
	width:100px;
	float:left;
	border-top:1px solid #fff;
	}

	/* display block will make the link fill the whole area of LI */
	#nav ul a {
	display:block;
	height:15px;
	padding: 8px 5px;
	color:#666;
	}

	#nav ul a:hover {
	text-decoration:underline;
	}

	/* fix ie6 small issue */
	/* we should always avoid using hack like this */
	/* should put it into separate file : ) */
	*html #nav ul {
	margin:0 0 0 -2px;
	} </style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
	/Sftouch/
	(function($){
	$.fn.sftouchscreen = function() {
	// Return original object to support chaining.
	return this.each( function() {
	// Select hyperlinks from parent menu items.
	$(this).find('li > ul').closest('li').children('a').each( function() {
	var $item = $(this);
	// No .toggle() here as it's not possible to reset it.
	$item.click( function(event){
	// Already clicked? proceed to the URI.
	if ($item.hasClass('sf-clicked')) {
	var $uri = $item.attr('href');
	window.location = $uri;
	}
	else {
	event.preventDefault();
	$item.addClass('sf-clicked');
	}
	}).closest('li').mouseleave( function(){
	// So, we reset everything.
	$item.removeClass('sf-clicked');
	});
	});
	});
	};
	})(jQuery);

	$(document).ready(function () {
	$('#nav li').hover(
	function () {
	//show its submenu
	$('ul', this).stop().slideDown(100);
	},
	function () {
	//hide its submenu
	$('ul', this).stop().slideUp(100);
	}
	);
	$('#nav')<?php echo user_agents(); ?>;

	});
	</script>
	</head>
	<body>
	<div id="menu">
	<ul id="nav">
	<li><a href="#">Parent 01</a></li>
	<li><a href="http://google.com">Google.com</a>
	<ul>
	<li><a href="http://bing.com">Bing.com</a></li>
	<li><a href="http://yahoo.com">Yahoo.com</a></li>
	<li><a href="#">Item 03</a></li>
	</ul>
	<div class="clear"></div>
	</li>
	<li><a href="#">Parent 03</a>
	<ul>
	<li><a href="#">Item 04</a></li>
	<li><a href="#">Item 05</a></li>
	<li><a href="#">Item 06</a></li>
	<li><a href="#">Item 07</a></li>
	</ul>
	<div class="clear"></div>
	</li>
	<li><a href="#">Parent 04</a></li>
	</ul>

	<div class="clear"></div>
	</div>
	</body>

	</html>