<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="inc/jquery.metadata.js"></script>
<script type="text/javascript" src="inc/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="inc/mbMenu.js"></script>
<link rel="stylesheet" type="text/css" href="css/menu_black.css" media="screen" />
<style type="text/css">
body a.style{
color:#AF3002;
font-family:sans-serif;
font-size:13px;
text-decoration:none;
}
.wrapper{
font-family:Arial, Helvetica, sans-serif;
}
.wrapper h1{
font-family:Arial, Helvetica, sans-serif;
font-size:26px;
}
button{
padding:4px;
display:inline-block;
cursor:pointer;
font:12px/14px Arial, Helvetica, sans-serif;
color:#666;
border:1px solid #999;
background-color:#eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:#999 2px 0px 3px;
-webkit-box-shadow:#999 2px 0px 3px;
margin-bottom:4px;
}
button:hover{
color:#aaa;
background-color:#000;
}
:focus {
outline: 0;
}
span.btn{
padding:10px;
display:inline-block;
cursor:pointer;
font:12px/14px Arial, Helvetica, sans-serif;
color:#aaa;
background-color:#eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:#999 2px 0px 3px;
-webkit-box-shadow:#999 2px 0px 3px;
}
span.btn:hover{
background-color:#000;
}
.msgBox{
position:absolute;
width:250px;
height:60px;
background:black;
-moz-box-shadow:#999 2px 0px 3px;
-webkit-box-shadow:#999 2px 0px 3px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:10px;
padding-top:20px;
top:10px;
right:10px;
font:20px/24px Arial, Helvetica, sans-serif;
}
.rootVoices td.rootVoice.custom.selected{
background: red;
padding:8px;
color:#ffffff;
cursor: pointer;
font-size:14px;
text-shadow:#660033 1px 1px 1px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:0;
-webkit-border-bottom-left-radius:0;
}
</style>
<script type="text/javascript">
$(function(){
$(".myMenu").buildMenu(
{
template:"menuVoices.html",
additionalData:"pippo=1",
menuWidth:200,
openOnRight:false,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:true,
fadeInTime:100,
fadeOutTime:300,
adjustLeft:2,
minZindex:"auto",
adjustTop:10,
opacity:.95,
shadow:false,
shadowColor:"#ccc",
hoverIntent:0,
openOnClick:true,
closeOnMouseOut:true,
closeAfter:1000,
submenuHoverIntent:200
});
$(".vertMenu").buildMenu(
{
template:"menuVoices.html",
menuWidth:170,
openOnRight:true,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:true,
fadeInTime:200,
fadeOutTime:200,
adjustLeft:0,
adjustTop:0,
opacity:.95,
openOnClick:false,
minZindex:200,
shadow:false,
hoverIntent:130,
submenuHoverIntent:130,
closeOnMouseOut:true
});
$(document).buildContextualMenu(
{
template:"menuVoices.html",
menuWidth:200,
overflow:2,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:false,
fadeInTime:100,
fadeOutTime:100,
adjustLeft:0,
adjustTop:0,
opacity:.99,
closeOnMouseOut:false,
onContextualMenu:function(o,e){
testForContextMenu();
}, //params: o = the contextual menu,e = the event
shadow:false
});
});
//this function get the id of the element that fires the context menu.
function testForContextMenu(el){
if (!el) el= $.mbMenu.lastContextMenuEl;
showMessage("the ID of the element is: "+$(el).attr("id"));
}
function recallcMenu(el){
if (!el) el= $.mbMenu.lastContextMenuEl;
var cmenu=+$(el).attr("cmenu");
$(cmenu).remove();
}
function loadFlash(){
$.ajax({
url:"testFlash/test.html",
dataType:"html",
success:function(html){
$("#flashTest").html(html);
}
});
}
function showMessage(msg){
var msgBox=$("<div>").addClass("msgBox");
$("body").append(msgBox);
msgBox.append(msg);
setTimeout(function(){msgBox.fadeOut(500,function(){msgBox.remove();})},3000)
}
</script>
</head>
<body>
<div id="wrapper">
<header id="header">
<!--<img src="img/banner.jpg">-->
</header><!-- #header-->
<div id="menu"><div class="wrapper">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#EDEDED">
<td valign="bottom">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="container" >
<tr>
<td class="">
<!-- start horizontal menu -->
<table class="myMenu rootVoices" cellspacing='0' cellpadding='0' border='0'><tr>
<td id="firstVoice" class="rootVoice {menu: 'box_menu'}" >box menu</td>
<td class="rootVoice {menu: 'menu_12'}" >ajax menu</td>
<td class="rootVoice {menu: 'menu_2'}" >menu 1</td>
<td class="rootVoice {menu: 'menu_2', disabled:true}" >menu disabled</td>
<td class="rootVoice {menu: 'menu_3'}" >menu 2</td>
<td class="rootVoice {menu: 'empty'}" onclick="showMessage('empty root menu')">empty menu</td>
</tr></table>
<!-- end horizontal menu -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- menues -->
<div id="menu_1" class="mbmenu">
<a data-type="title" >title menu_1.1</a> <!-- menuvoice title-->
<a href="http://patapage.com" class="{img: 'ico_view.gif'}" >menu_1.1 (href with target "_self") </a> <!-- menuvoice with href-->
<a class="{action: 'showMessage(\'menu_1.2\')'}" >menu_1.2</a> <!-- menuvoice with js action-->
<a data-type="separator"> </a> <!-- menuvoice separator-->
<a href="#" class="{action: 'showMessage(\'menu_1.3\')', disabled:true}">menu_1.3</a> <!-- menuvoice disabled-->
<a class="{action: 'showMessage(\'menu_1.4\')', menu:'menu_1', img: '24-book-blue-check.png'}">menu_1.4</a><!-- menuvoice with js action, image and submenu-->
</div>
<div id="menu_2" class="mbmenu">
<a data-type="title" class="{action: 'showMessage(\'menu_2.1\')', img: 'icon_13.png'}">choose one of these links</a>
<a class="{action: 'showMessage(\'menu_2.2\')'}">menu_2.2</a>
<a class="{menu: 'sub_menu_1', img: 'icon_14.png', disabled:true}">menu_2.3 (disabled)</a>
<a class="{menu: 'sub_menu_2', img: '24-tag-add.png'}">menu_2.4</a>
<a data-type="separator"> </a>
<a class="{action: 'showMessage(\'menu_2.4\')'}">menu_2.5</a>
</div>
<div id="menu_3" class="mbmenu" id="checkMenu">
<a data-type="text">
<form>
<img src="images/browser.png" alt="img" style="position:absolute;margin-top:-20px; margin-left:-25px;margin-bottom:10px"/><br/>
<input id="myInput" type="text" name="sss" value="you can have input inside" />
<input type="button" name="xxx" value="submit" onclick="$.fn.removeMbMenu($.mbMenu.options.actualOpenedMenu,true);"/>
<table>
<tr><td><input type="checkbox" checked value="aaa"/></td><td>checkbox 1</td></tr>
<tr><td><input type="checkbox" value="aaa"/></td><td>checkbox 1</td></tr>
<tr><td><input type="checkbox" value="aaa"/></td><td>checkbox 2</td></tr>
<tr><td><input type="checkbox" value="aaa"/></td><td>checkbox 3</td></tr>
</table>
<br>
<br/>* form fields value are not preserved once you close the menu!
</form>
</a>
<a data-type="separator"> </a>
<a class="{action: 'showMessage(\'menu_3.1\')', img: 'iconDone.png'}">menu_3.1</a>
<a id="aaa" class="{menu:'sub_menu_2'}" >submenu</a>
<a class="{action: 'showMessage(\'menu_3.4\')'}">menu_3.4 con testo veramente molto lungo menu_3.4 con testo veramente molto lungo</a>
</div>
<div id="sub_menu_1" class="mbmenu">
<a class="{action: 'showMessage(\'sub_menu_1.1\')'}">sub_menu_1.1</a>
<a data-type="separator"> </a>
<a class="{menu:'menu_1'}">sub_menu_1.2</a>
<a class="{action: 'showMessage(\'sub_menu_1.3\')', img: 'bgColor.gif'}">sub_menu_1.3</a>
<a class="{action: 'showMessage(\'sub_menu_1.4\')',img: 'Applet.gif'}">sub_menu_1.4</a>
</div>
<div id="sub_menu_2" class="mbmenu">
<a class="{action: 'showMessage(\'sub_menu_2.1\')', img: 'buttonfind.gif'}" target="_blank" >sub_menu_2.1</a>
<a href="http://google.com" class="{img: 'buttonfind.gif'}" target="_self" >sub_menu_2.2 (href target _self)</a>
<a class="{action: 'showMessage(\'sub_menu_2.3\')'}">sub_menu_2.3</a>
<a data-type="separator"> </a>
<a class="{action: 'showMessage(\'sub_menu_2.4\')'}">sub_menu_2.4</a>
<a class="{action: 'showMessage(\'sub_menu_2.5\')'}" >sub_menu_2.5</a>
</div>
<div id="conext_menu_1" class="mbmenu">
<a data-type="text" >
<img src="images/browser.png" alt="img" style="position:absolute;margin-top:-20px; margin-left:-25px;margin-bottom:10px"/><br/>
<br/>immagini che vuoi ed altro testo che ti pare Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi felis leo, consequat et, lacinia a, facilisis sit amet,<br/><br/>
</a>
<a data-type="separator"> </a>
<a class="{action: 'testForContextMenu()',img: 'iconDone.png'}" >test: get opener ID</a>
<a id="bbb" class="{menu:'sub_menu_2'}" >submenu</a>
<a class="{action: 'showMessage(\'conext_menu_1.4\')'}" >conext_menu_1.4 con testo veramente molto lungo</a>
</div>
<div id="box_menu" class="mbmenu boxMenu">
<table style="border:0;" >
<tr>
<td>
<div style="height:130px"><img src="http://patapage.net/pp/images/logo.png" alt="patapage" width="150"></div>
<a href="http://patapage.com" target="_blank">Home</a>
<a href="http://patapage.com/demo/" target="_blank">Demo page</a>
<a href="http://patapage.com/applications/pataPage/site/aboutHelp.jsp" target="_blank">About Patapage</a>
<a href="http://patapage.com/applications/pataPage/site/access/login.jsp" target="_blank">Sign up</a>
</td>
<td>
<div style="height:130px;"><img src="http://bugsvoice.com/applications/bugsVoice/images/logo.png" alt="bugsvoice" width="250" style="padding-top:30px"></div>
<a href="http://bugsvoice.com" target="_blank">Home</a>
<a href="http://bugsvoice.com/applications/bugsVoice/site/details.jsp" target="_blank">Details</a>
<a href="http://bugsvoice.com/applications/bugsVoice/site/aboutHelp.jsp" target="_blank">About Bugs Voice</a>
<a href="http://bugsvoice.com/applications/bugsVoice/site/access/login.jsp" target="_blank">Sign up</a>
</td>
<td>
<div style="height:130px"><img src="http://devineu.eu/applications/webwork/site_devineu/media/baloonSmall.png" alt="bugsvoice" width="200"></div>
<a href="http://devineu.eu/home.page" target="_blank">Home</a>
<a href="http://devineu.eu/mission.page" target="_blank">Mission</a>
<a href="http://devineu.eu/interviewyourself.page" target="_blank">Interview yourself</a>
<a href="http://devineu.eu/getInterviewed.page" target="_blank">Get interviewed</a>
<a onclick="showMessage('close!!')">close on click</a>
</td>
</tr>
</table>
</div>
<!-- end menus -->
</div></div>
<section id="middle">
<div id="container">
<div id="content">
<div id="centerads"><br>โฆษณาใหญ่ 2 ชิ้น<br></div>
<div id="detail"><br>Content หลัก<br></div>
</div><!-- #content-->
</div><!-- #container-->
<aside id="sideLeft">
<div class="submenu">
<ul id="nav">
<li><a href="#"><img src="images/t1.png" />Home</a></li>
<li><a href="#" class="sub" tabindex="1"><img src="images/t2.png" />Menu</a><img src="images/up.gif" alt="" />
<ul>
<li><a href="#"><img src="images/empty.gif" />Menu</a></li>
<li><a href="#"><img src="images/empty.gif" />Menu</a></li>
<li><a href="#"><img src="images/empty.gif" />Menu</a></li>
<li><a href="#"><img src="images/empty.gif" />Menu</a></li>
<li><a href="#"><img src="images/empty.gif" />Menu</a></li>
</ul>
</li>
<li><a href="#" class="sub" tabindex="1"><img src="images/t3.png" />Menu</a><img src="images/up.gif" alt="" />
<ul>
<li><a href="#"><img src="images/empty.gif" />Menu</a></li>
<li><a href="#"><img src="images/empty.gif" />Menu</a></li>
<li><a href="#"><img src="images/empty.gif" />Menu</a></li>
<li><a href="#"><img src="images/empty.gif" />Menu</a></li>
<li><a href="#"><img src="images/empty.gif" />Menu</a></li>
</ul>
</li>
<li><a href="#"><img src="images/t2.png" />Menu</a></li>
<li><a href="#"><img src="images/t2.png" />Menu</a></li>
<li><a href="#"><img src="images/t2.png" />Menu</a></li>
</ul>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/th_TH/all.js#xfbml=1&appId=516101021742306";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/LittleMerchant"
data-width="250" data-height="The pixel height of the plugin" data-colorscheme="light"
data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>
</aside><!-- #sideLeft -->
<aside id="sideRight">
โฆษณาเล็ก 5 ชิ้น
</aside><!-- #sideRight -->
</section><!-- #middle-->
</div><!-- #wrapper -->
<footer id="footer">
*-*
</footer><!-- #footer -->
</body>
</html>
Load balance : Server 00
