Уфф, там Joomla и макет почти сверстан (на локале), код очень большой, выкладываю код шапки, и кусок кода css, этого достаточно?
head:
<head>
<jdoc:include type="head"/>
<link href="/site/templates/tm/css/template.css" rel="stylesheet" type="text/css" media="all"/>
<link href="/site/templates/tm/css/custom_modules.css" rel="stylesheet" type="text/css" media="all"/>
<link href="/site/templates/tm/css/editor.css" rel="stylesheet" type="text/css" media="all"/>
<link href="/site/templates/tm/css/colorbox.css" rel="stylesheet" type="text/css" media="all"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://localhost/site/templates/tm/js/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("a[rel='scheme1']").colorbox({transition:"fade"});
});
</script>
<script type="text/javascript">
window.onload = function() {
var table_shadow = document.getElementById("table_shadow");
var mainmenu = document.getElementById("mainmenu");
table_shadow.style.width = mainmenu.style.offsetWidth + 'px';
}
</script>
<!--[if (gte IE 6) & (lte IE 8)]>
<link href="/site/templates/tm/css/ie.css" rel="stylesheet" type="text/css" media="all"/>
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript" src="/site/templates/tm/js/pngfix.js"></script>
<![endif]-->
</head>
menu:
<ul class="menu" id="mainmenu">
<li id="current" class="first active item1">
<a href="http://localhost/site/"><span>Главная</span></a>
</li>
<li class="parent item2">
<a href="/site/index.php?option=com_content&view=article&id=1&Itemid=2"><span>Документация</span></a>
</li>
</ul>
<table id="table_shadow"><tr><td></td><td></td></tr></table>
CSS:
|
Код:
|
.menu {
height: 35px;
padding: 0 20px;
display: inline-block;
*display: inline;
*zoom: 1;
border: 0px red solid;
position: relative;
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-khtml-border-radius: 11px;
behavior: url(templates/tm/htc/PIE.php);
background: url("../images/menu_bg.jpg") 0 0 repeat-x;
}
.menu li {
float: left;
_display: inline;
overflow: hidden;
position: relative;
text-align: center;
border: 0px solid;
background: url("../images/hormenu_separator.png") left 0 no-repeat;
}
.menu li.first {
background-image: none;
}
.menu li.item7 {
background: url("../images/stand_out_item.png") 0 0 no-repeat;
}
.menu li.item7.last {
margin-right: -20px;
padding-right: 20px;
}
.menu li a {
padding: 10px 12px 9px;
display: block;
font: 600 14px Myraid Pro, Helvetica, sans-serif;
color: #f2faff;
text-decoration: none;
border: 0px blue solid;
}
.menu li.first a {
padding-left: 0px;
}
.menu li.last a {
padding-right: 0px;
}
.menu li a:hover {
text-decoration: underline;
}
/* submenu */
.menu li.parent ul {
padding-top: 2px;
display: none;
*text-align: left;
border: 0px solid red;
position: relative;
zoom:1;
z-index: 1000;
}
.menu li.parent:hover ul {
display: block;
}
.menu li.parent ul li {
float: none;
display: block !important;
text-align: left;
overflow: visible;
border: 0px green solid;
background: url("../images/submenu_bg.jpg") 0 0 repeat;
}
.menu li.parent ul li.last {
border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
}
.menu li.parent ul li a {
max-width: 117px;
*width: 117px;
padding: 4px 0 4px 8px;
font: 600 13px Myraid Pro, Helvetica, sans-serif;
color: #f2faff;
border: 0px blue solid;
}
/* submenu */
#table_shadow {
height: 20px;
background: red;
} |