ciao
da dove partire?
inizia a scaricare il modulo menu lo installi e poi modifichi il css del menu e lo fai come quello postato da te.
Allora io ho un index.html, cartella js, img e css nella root principale; in css trovo main e style con questi codici:
Main
.mainmenuslide {
height: 29px; width:550px;
background: url("../img/background_main.png") no-repeat top; position: relative;
padding: 15px 0 15px 0; margin: 0 -10px 0;
}
.mainmenuslide li {
padding: 16px 0 11px 25px; margin: -18px 0 0 9px;
float: left; list-style: none;
}
.mainmenuslide li.back {
background: url("../img/hover_main.png") no-repeat right -52px;
width: 9px; height: 30px; padding: 0px 0 22px 0;
z-index: 1; margin: -12px 0 0 8px; position: absolute;
}
.mainmenuslide li.back .left {
background: url("../img/hover_main.png") no-repeat top left ;
padding: 0px 0 22px 0; height: 30px; margin-right: 24px;
}
.mainmenuslide li a {
font: bold 14px arial;
top: 7px; z-index: 2; float: left;
height: 30px; position: relative;
margin: auto 10px; outline: none;
}
Style.css
@charset "utf-8";
/* CSS Document */
/**** Body ***/
body{
background:#aedae9;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:normal;
color:#FFF;
margin:0;
}
/**** Links ***/
a{ text-decoration: none;color:#FFF;}
a:link{ text-decoration:none;}
a:visited{ text-decoration:none;}
/**** Header ***/
#header{
background: url(../img/background_header.png) no-repeat;
width:1000px;
height:108px;
margin:auto;
}
.header_navigation{
float:right;
width:550px;
height:24px;
margin:24px 0 0 0;
}
/**** content ***/
#content{
width:940px;
margin:auto;
border-left:1px solid gray; border-bottom:1px solid gray ; border-right:1px solid gray ;
padding: 30px;
min-height:500px;
}
/**** Footer ***/
#footer{
width:1000px;
margin:auto;
}
In index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide menu with jQuery and CSS | iconshock</title>
<link href="css/style.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mainmenuslide.js"></script>
<script type="text/javascript">
$(function() {
$("ul").mainmenuslide({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>
</head>
<body>
<div id="header">
<div class="header_navigation">
<ul class="mainmenuslide">
<li><a href="#" alt="">Home[/url]</li>
<li><a href="#" alt="">Portafolio[/url]</li>
<li><a href="#" alt"">Services[/url]</li>
<li><a href="#" alt"">Blog[/url]</li>
<li><a href="#" alt"">Contact[/url]</li>
</ul>
</div><!-- end header_navigation-->
</div><!-- end header -->
<div id="content">
<p> En este div va el contenido dinamico de la pagina (content).</p>
</div><!-- end content -->
<div id="footer"></div><!-- End footer-->
</body>
</html>
Il codice css ho provato a copiarlo maximenu_CK.css nella cartella assets, ma non rilevo ne possibili errori nella visualizzazione ne succede nient'altro. In index poi sono definite le voci di menù, io come faccio a richiamere quelle che già ho?
Cerco di capire come fare così una volta fatto per uno posso farlo per tutti quelli che mi interessano; il menù che ho proposto è fatto in jquery, non è che c'è anche una chiamato a qualche funzione di questo framework?
