۱۳۹۱/۱/۲۹، ۱۵:۰۰:۵۱ عصر
آموزش قراردادن کد مورد نظر
وارد کنترل پنل ادمین بشید>>>قالب ها و پوسته ها>>>قالب مورد نظر>>>global.css>>>حالت بندی پیشرفته
کد های زیر رو به انتهای کد ها اضافه کنید
حالا وارد قالب ها بشید >>>قالب مورد نظر>>>header template>>>header
کد های زیر رو به اول کد ها اضافه کنید
لازم به ذکر هست
شما باید به جای ADRESS در هر منو ادرس مورد نظر خودتون رو وارد کنید
شما باید به جای PICTURE در هر منو آیکون مورد نظر خودتون رو وارد کنید
شما باید به جای شماره x در هر منو عنوان لینک خود را وارد کنید
آموزش تمومه فقط یک مار میمونه اون هم اینکه باید فایل زیر رو در هاست آپلود کنید
وارد کنترل پنل ادمین بشید>>>قالب ها و پوسته ها>>>قالب مورد نظر>>>global.css>>>حالت بندی پیشرفته
کد های زیر رو به انتهای کد ها اضافه کنید
کد:
.menu2 {
-moz-transition: all 1.5s ease 0s;
background: url("images/top/foot.png") no-repeat scroll center bottom transparent;
border-radius: 15px 15px 15px 15px;
color: #000000;
direction: rtl;
font-family: tahoma;
font-size: 12px;
margin-bottom: auto;
margin-top: auto;
opacity: 0.7;
padding-bottom: 35px;
position: fixed;
right: -200px;
text-decoration: none;
width: 245px;
}
.menu2:hover {
-moz-transition: all 0.6s ease 0s;
cursor: pointer;
opacity: 1;
right: -15px;
}
.menu2 li {
-moz-transition: all 0.6s ease 0s;
display: block;
padding: 4px 25px;
width: 150px;
}
.menu2 li:hover {
-moz-transition: all 0.6s ease 0s;
background: -moz-linear-gradient(left center , rgba(255, 255, 255, 0) 0%, rgba(0, 182, 214, 0.47) 47%, #00B6D6 100%) repeat scroll 0 0 transparent;
padding: 4px 35px 4px 25px;
}
.menu2 li a {
color: #545454;
line-height: 43px;
text-decoration: none;
}
.menu2 img {
padding-left: 10px;
padding-right: 5px;
vertical-align: top;
}
.menu2head {
background: url("images/top/top.png") no-repeat scroll 0 0 transparent;
display: block;
height: 35px;
width: 245px;
}
.menu2content {
background: url("images/top/content.png") repeat-y scroll 0 0 transparent;
display: block;
width: 245px;
}
.menuem {
background: url("images/top/em.png") no-repeat scroll 0 0 transparent;
display: block;
height: 96px;
position: absolute;
right: 196px;
top: 39%;
width: 32px;
}
حالا وارد قالب ها بشید >>>قالب مورد نظر>>>header template>>>header
کد های زیر رو به اول کد ها اضافه کنید
کد:
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=15 //Customize x offset of tooltip
var offsetypoint=15 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="0px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
<div class="menu2">
<div class="menu2head"></div>
<div class="menu2content">
<div class="menuem"></div>
<li><a href="adress"><img title="" alt="" src="picture">شماره 1</a></li>
<li><a href="adress"><img title="" alt="" src="picture">شماره 2</a></li>
<li><a href="adress"><img title="" alt="" src="picture">شماره 3</a></li>
<li><a href="adress"><img title="" alt="" src="picture">شماره 4</a></li>
<li><a href="adress"><img title="" alt="" src="picture">شماره 5</a></li>
<li><a href="adress"><img title="" alt="" src="picture">شماره 6</a></li>
</div>
</div>
لازم به ذکر هست
شما باید به جای ADRESS در هر منو ادرس مورد نظر خودتون رو وارد کنید
شما باید به جای PICTURE در هر منو آیکون مورد نظر خودتون رو وارد کنید
شما باید به جای شماره x در هر منو عنوان لینک خود را وارد کنید
آموزش تمومه فقط یک مار میمونه اون هم اینکه باید فایل زیر رو در هاست آپلود کنید