Ho provato questo e mi piace
http://www.html.it/script/un-menu-ve...ordion-menu/#d
Il problema è che aggiungendo il codice del menù, mi distrugge il layout mettendomi div del contenuto e del footer larghi quando la schermata.
Ho pensato che fosse dovuto al fatto che nel css del menù erano specificate le dimensioni in pixel quando io in tutto il resto del layout le ho specificate in percentuale ma non cambia.
Questo è la mia index e css
codice:
<html><head>
<title>Prova</title>
<link rel="stylesheet" type="text/css" href="template/style.css">
<meta http-equiv="Content-Language" content="it" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="config/jsmenu.css">
<link rel="stylesheet" type="text/css" href="config/menu.css">
<script type="text/javascript" src="config/expand.js"></script>
<meta name="keywords" content="full, metal, panic, fmp, fumoffu, the second raid, spoiler, mithril, amalgam, sigma" />
<meta name="description" content="Full Metal Panic Italy, sito ufficiale italiano di Full Metal Panic con spoiler, informazioni, curiosità e molto altro! Fanart, immagini, download e schede tecniche" />
<meta name="copyright" content="Copyright fullmetalpanic-italy.com - All Right Reserved" />
<link rel="shortcut icon" href="../img/favicon.ico" />
<script type="text/javascript" src="config/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="config/scriptbreaker-multiple-accordion-1.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$(".topnav").accordion({
accordion:false,
speed: 500,
closedSign: '[+]',
openedSign: '[-]'
});
});
</script>
</head>
<body>
<div id="container">
<div id="banner"><?php include('template/banner.php') ?></div>
<!--<div id="nav_main"><?php include('template/nav_main.php') ?></div> -->
<div id="navigation_left"><?php include("template/link_left.php") ?></div>
<div id="navigation_right"><?php include("template/link_right.php") ?></div>
<div id="content"><?php include("$page.php") ?></div>
<div id="footer"><?php include('template/footer.php') ?></div>
</div>
</body>
</html>
codice:
html{ margin:0;
padding:0
}
body {
font: 100.01% Verdana,Arial,sans-serif;
color:#000;
text-align:justify;
}
div#container{
overflow: hidden;
min-width:500px;
width:1024px;
margin:0px auto;
padding:10px;
border:1px solid #444444;
}
div#banner{
padding:10px;
border:1px solid #444444;
background: url('header.png') no-repeat center center;
height:400px;
}
div#nav_main{
padding:10px;
border:1px solid #444444;
}
div#nav_main ul li{
display:inline-block;
}
div#navigation_left{
float: left;
}
div#content{
padding:10px;
margin-left:25%;
margin-right:25%;
}
div#footer{
clear:both;
padding:10px;
border:1px solid #444444;
background: url('footer.png') no-repeat center center;
height:70px;
}
div#uscite{
padding:10px;
float:right;
border:0px;
height:40%;
width:20%;
}
div#jp{
text-align: center;
width:50%;
height:100%;
float:left;
border:0px;
}
div#it{
text-align: center;
width:50%;
height:100%;
float:right;
border:0px;
}
.topnav {
padding: 40px 28px 25px 0;
font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}
ul.topnav {
padding: 0;
margin: 0;
font-size: 1em;
line-height: 0.5em;
list-style: none;
}
ul.topnav li {}
ul.topnav li a {
line-height: 10px;
font-size: 11px;
padding: 10px 5px;
color: #000;
display: block;
text-decoration: none;
font-weight: bolder;
}
ul.topnav li a:hover {
background-color:#675C7C;
color:white;
}
ul.topnav ul {
margin: 0;
padding: 0;
display: none;
}
ul.topnav ul li {
margin: 0;
padding: 0;
clear: both;
}
ul.topnav ul li a {
padding-left: 20px;
font-size: 10px;
font-weight: normal;
}
ul.topnav ul li a:hover {
background-color:#D3C99C;
color:#675C7C;
}
ul.topnav ul ul li a {
color:silver;
padding-left: 40px;
}
ul.topnav ul ul li a:hover {
background-color:#D3CEB8;
color:#675C7C;
}
ul.topnav span{
float:right;
}
div#navig A:link,#navig A:active,#navig A:visited {
text-decoration:none;
display:block;
text-align:center;
background-color:#6A875B;
width:100%;
font-size:11px;
color:#000;
margin-bottom:2px;
padding-bottom:2px;
padding-top:2px;
font-family:Georgia;
}
Rispondi quotando
