Vlastne menu (vlastny vzhlad a funkcie menu)

maxxim74 · 2012-03-09 13:58:13

Zdravim
na nete som nasiel css menu, ktore je velmi efektne. Aplikoval som ho cez blankModule a fakci fajn. Problem je len v niekolkych veciach.
Linky musim editovat rucne v index.html a .css subore. Nejde, aspon som nenasiel riesenie aby som ho prepojil s funcknym menu a tym aby sa linky dosadili automaticky. Je to viacfunckne menu. Jedinym riesenim je asi vytvorit vlastny modul, ale na to som prikratky. Prosim poradte mi. Link na web odkial som to stiahol http://www.designchemical.com/lab/jquer … g-started/. Je to vlastne plugin pre wordpress.

Tu je index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>jQuery Vertical Mega Menu Plugin v 1.1</title>
<link href="css/vertical_menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcverticalmegamenu.1.1.js'></script>
<script type="text/javascript">
$(document).ready(function($){
	$('#mega-1').dcVerticalMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'slide',
		direction: 'right'
	});
});
</script>
</head>
<body>
<div class="wrap">
<h2>Wordpress Plugin - jQuery Vertical Mega Menu v 1.1 - <a href="http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega-menu-widget/">Visit Plugin Site</a></h2>
<p style="color: #fff;">
Settings - 3 items per row, effect - slide and menu flyout to the right
</p>
<div class="demo-container clear">
<div class="dcjq-vertical-mega-menu">
<ul id="mega-1" class="menu">
<li id="menu-item-0"><a href="#">Home</a></li>
<li id="menu-item-1"><a href="#">Footwear</a>
<ul>
<li id="menu-item-4"><a href="#">Nike</a>
<ul>
<li id="menu-item-19"><a href="#">Nike Air Foamposite One</a></li>
<li id="menu-item-20"><a href="#">The Air Jordan 2011</a></li>
<li id="menu-item-21"><a href="#">Nike Hyperfuse Max</a></li>
</ul>
</li>
<li id="menu-item-6"><a href="#">Adidas</a>
<ul>
<li id="menu-item-25"><a href="#">Supernova Glide 2 W</a></li>
<li id="menu-item-26"><a href="#">adizero adios</a></li>
<li id="menu-item-27"><a href="#">adiSTAR Salvation 2 W</a></li>
</ul></li>
<li id="menu-item-7"><a href="#">Gola</a>
<ul>
<li id="menu-item-28"><a href="#">Gola Harrier</a></li>
<li id="menu-item-29"><a href="#">Gola Multi</a></li>
<li id="menu-item-30"><a href="#">Gola Chase</a></li>
</ul></li>

<li id="menu-item-8"><a href="#">Nike</a>
<ul>
<li id="menu-item-31"><a href="#">Lady Air Pegasus+ 27</a></li>
<li id="menu-item-32"><a href="#">Nike LunarGlide+ 2 </a></li>
<li id="menu-item-33"><a href="#">Nike LunarEclipse+</a></li>
</ul>
</li>
<li id="menu-item-10"><a href="#">Adidas</a>
<ul>
<li id="menu-item-37"><a href="#">Adidas Messenger Bag</a></li>
<li id="menu-item-38"><a href="#">Kanadia TR 2 Trail</a></li>
<li id="menu-item-39"><a href="#">Supernova Sequence 3</a></li>
</ul></li>
<li id="menu-item-11"><a href="#">Gola</a>
<ul>
<li id="menu-item-40"><a href="#">Gola Buzz</a></li>
<li id="menu-item-41"><a href="#">Gola Harrier</a></li>
<li id="menu-item-42"><a href="#">Gola Harrier Multi</a></li>
</ul></li>
</ul>
</li>

<li id="menu-item-2"><a href="#">Jackets</a>
<ul>
<li id="menu-item-12"><a href="#">Blue Adidas Jacket</a></li>
<li id="menu-item-13"><a href="#">White Training Jacket</a></li>
<li id="menu-item-14"><a href="#">Red Adidas Jacket</a></li>
</ul>
</li>
<li id="menu-item-3"><a href="#">Sports Bags</a>
<ul>
<li id="menu-item-15"><a href="#">Golf Bags</a>
<ul>
<li id="menu-item-43"><a href="#">IZZO Scout Stand Bag</a></li>
<li id="menu-item-44"><a href="#">OGIO DECIBEL Stand</a></li>
<li id="menu-item-45"><a href="#">Tribal Cart Bag</a></li>
</ul></li>
<li id="menu-item-17"><a href="#">Sports Bags</a>
<ul>
<li id="menu-item-47"><a href="#">Adidas Sports Bag</a></li>
<li id="menu-item-48"><a href="#">Nike Sports Bag</a></li>
</ul></li>
<li id="menu-item-18"><a href="#">Tennis Bags</a>
<ul>
<li id="menu-item-49"><a href="#">Wilson Tennis Bag</a></li>
<li id="menu-item-50"><a href="#">Adidas Tennis Bag</a></li>
</ul></li>
</ul>
</li>
<li id="menu-item-51"><a href="#">Customer Service</a>
<ul>
<li id="menu-item-52"><a href="#">Shipping</a></li>
<li id="menu-item-53"><a href="#">Refunds/Returns</a></li>
<li id="menu-item-54"><a href="#">Payment</a></li>
<li id="menu-item-55"><a href="#">Terms & Conditions</a></li>
</ul></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Tu je .css

/* Page */
body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,input,th,td{border:0;outline:none;margin:0;padding:0;}
ul{list-style:none;}

/* Demo Page Styles */
body {font: normal 13px Arial, sans-serif;}
h2 {font: normal 26px Arial, sans-serif; padding: 20px 0; margin: 0 0 30px 0;}
.wrap {width: 960px; margin: 0 auto;}
.demo-container {padding: 20px 0; width: 200px; float: left;}
.demo-container.right {float: right;}
.demo-container h4 {font-size: 14px; margin: 0 0 5px 0;}
.clear {clear: both;}

/* Vertical Mega Menu Styles */
.dcjq-vertical-mega-menu .menu{
font: bold 13px Arial, sans-serif; 
line-height: 16px; 
position: relative; /* Required */
border: 1px solid #999;
border-bottom: none;
}
.dcjq-vertical-mega-menu .menu li a {
display: block; 
color: #000; 
padding: 11px 38px 11px 25px; 
text-shadow: 1px 1px 1px #fff; 
text-decoration: none;
border-bottom: 1px solid #999;
background: url(images/bg_nav.png) repeat-x 0 0;
}
.dcjq-vertical-mega-menu .menu li a:hover, .dcjq-vertical-mega-menu .menu li.mega-hover a {
background-position: 0 -40px; 
color: #fff; 
text-shadow: 1px 1px 1px #000;
}
.dcjq-vertical-mega-menu .menu li a.dc-mega {
position: relative;
}
/* Add arrow icon to parent links */
.dcjq-vertical-mega-menu .menu li a .dc-mega-icon {
display: block; 
position: absolute; 
top: 14px; 
right: 15px; 
width: 6px; 
height: 8px; 
background: url(images/arrow_right.png) no-repeat -6px 0;
}
.dcjq-vertical-mega-menu .menu li a:hover .dc-mega-icon, .dcjq-vertical-mega-menu .menu li.mega-hover a .dc-mega-icon {
background-position: 0 0;
}
/* Mega menu container */
.dcjq-vertical-mega-menu .menu li .sub-container {
position: absolute; /* Required */
overflow: hidden;
background: url(images/bg_menu.png) no-repeat 100% 100%; /* Add the drop shadow */
padding: 0 13px 17px 0; /* Padding for drop shadow */
}
.dcjq-vertical-mega-menu .menu li .sub-container .sub {
border: none;
padding: 15px 15px 5px 15px;
background: #fff url(images/bg_grad_top.png) repeat-x 0 0;
border-top: 1px solid #ccc; 
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ccc;
}
.dcjq-vertical-mega-menu .menu li .sub .row {
width: 100%; overflow: hidden; /* Clear floats */
}
.dcjq-vertical-mega-menu .menu li .sub li {
float: none; 
width: 160px; 
font-size: 1em; 
font-weight: normal;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr {
float: left; /* Required */
margin: 0 5px 10px 5px;
}
.dcjq-vertical-mega-menu .menu li .sub a, .dcjq-vertical-mega-menu .menu.left li .sub a {
background: none; 
border: none; 
text-shadow: none;
float: none;
color: #000; 
display: block;
text-decoration: none; 
font-size: 0.9em;
margin-bottom: 0;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a {
background: url(images/bg_nav.png) repeat-x 0 -40px; 
padding: 5px;
margin-bottom: 5px;
text-transform: uppercase; 
font-weight: bold; 
color: #fff;
text-shadow: 1px 1px 1px #000;
text-align: center;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000; 
text-shadow: none;
}
.dcjq-vertical-mega-menu .menu .sub li.mega-hdr li {margin-bottom: 3px;}
.dcjq-vertical-mega-menu .menu .sub li a {
padding: 3px 3px 3px 15px;
background: url(images/bullet.png) no-repeat 3px 8px;
font-weight: normal;
text-transform: capitalize; font-size: 12px;
}
.dcjq-vertical-mega-menu .menu .sub li a:hover {
color: #fff;
background: #000 url(images/bullet_white.png) no-repeat 5px 8px;
}
.dcjq-vertical-mega-menu .menu .sub ul li {
padding-right: 0;
}
/* Custom mega menu styling */
.dcjq-vertical-mega-menu .menu li#menu-item-1 .sub .row {
padding: 10px 10px 0 40px;
margin-bottom: 10px;
border: 1px solid #ccc;
background: url(images/mens.png) no-repeat 0 center;
}
.dcjq-vertical-mega-menu .menu li#menu-item-1 .sub .row.last {
background: url(images/ladies.png) no-repeat 0 0;
}
.dcjq-vertical-mega-menu .menu li#menu-item-1 .sub li.mega-hdr {
padding: 75px 0 0;
}
li#menu-item-4.mega-hdr {background: url(images/nike.png) no-repeat center 0;}
li#menu-item-5.mega-hdr {background: url(images/reebok.png) no-repeat center 0;}
li#menu-item-6.mega-hdr {background: url(images/adidas_1.jpg) no-repeat center 0;}
li#menu-item-7.mega-hdr {background: url(images/gola_1.jpg) no-repeat center 0;}
li#menu-item-8.mega-hdr {background: url(images/nike_2.jpg) no-repeat center 0;}
li#menu-item-9.mega-hdr {background: url(images/reebok_2.jpg) no-repeat center 0;}
li#menu-item-10.mega-hdr {background: url(images/adidas_2.jpg) no-repeat center 0;}
li#menu-item-11.mega-hdr {background: url(images/gola_2.jpg) no-repeat center 0;}

li#menu-item-3 li.mega-hdr {padding: 120px 0 0;}
li#menu-item-15.mega-hdr {background: url(images/bag_1.jpg) no-repeat center 0;}
li#menu-item-16.mega-hdr {background: url(images/bag_2.jpg) no-repeat center 0;}
li#menu-item-17.mega-hdr {background: url(images/bag_3.jpg) no-repeat center 0;}
li#menu-item-18.mega-hdr {background: url(images/bag_4.jpg) no-repeat center 0;}

/* Styling for menu items with only 2 levels */
.dcjq-vertical-mega-menu .menu li .sub-container.non-mega .sub {
padding: 10px;
background: #fff;
}
.dcjq-vertical-mega-menu .menu li .sub-container.non-mega li {
padding: 0; 
margin: 0;
width: 150px;
float: none;
}


/* Custom styling for 2 levels */
.dcjq-vertical-mega-menu .menu li#menu-item-2 .sub-container.non-mega .sub {
width: 480px; 
height: 180px;
padding: 20px 10px 10px;
}
.dcjq-vertical-mega-menu .menu li#menu-item-2 .sub-container.non-mega li {
float: left;
}
li#menu-item-12, li#menu-item-13, li#menu-item-14{
padding: 150px 0 0;
margin-right: 10px;
}
li#menu-item-12 {background: url(images/jacket_1.jpg) no-repeat center 0;}
li#menu-item-13 {background: url(images/jacket_2.jpg) no-repeat center 0;}
li#menu-item-14 {background: url(images/jacket_3.jpg) no-repeat center 0;}

body

#1 2012-03-09 13:58:13

Re: Vlastne menu (vlastny vzhlad a funkcie menu)

Zápatí