طراحی سایت حرفه ای فاکتور مهمی در ورود به تجارت الکترونیک و وب مارکتینگ می باشد. درج نمودن نیازمندی های کاربران با رعایت اصول زیبایی و راحتی موجب جلب توجه خاص کاربر می شود که در مبحث سئو موثر می باشد. طراحی منو یکی از آلمان های قابل توجه در طراحی وب سایت می باشد و اغلب در تمامی صفحات موجود در طراحی سایت شما درج می شود. طراحی منوی زیبا در کنار لینک دهی به تمامی صفحات سایت یکی از اصول مورد توجه در طراحی سایت می باشد. کدهای جاوا یکی از زبان های پرکاربرد در طراحی منوهای زیبا می باشد. در اینجا مراحل طراحی منو به تصویر کشیده در بالا را گام به گام توضیح خواهیم داد.
کدهای HTML زیر می بایست در صفحه وب سایت درج شود.
<div id="sse1">
<div id="sses1">
<ul>
<li><a href="/demo/?menu=1&skin=2&p=Javascript-Menus">Javascript Menus</a></li>
<li><a href="/demo/?menu=1&skin=2&p=Horizontal-Menus">Horizontal Menus</a></li>
<li><a href="/demo/?menu=1&skin=2&p=Web-Menus">Web Menus</a></li>
</ul>
</div>
</div>
حال کدهای css را در فایل استایل وارد می نماییم.
#sse1
{
/*You can decorate the menu's container, such as adding background images through this block*/
background-color: #222;
height: 38px;
padding: 15px;
border-radius: 3px;
box-sizing: content-box;
}
#sses1
{
margin:0 auto;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/
}
#sses1 ul
{
position: relative;
list-style-type: none;
float:left;
padding:0;margin:0;
border-bottom:solid 1px #6C0000;
}
#sses1 li
{
float:left;
list-style-type: none;
padding:0;margin:0;background-image:none;
}
/*CSS for background bubble*/
#sses1 li.highlight
{
background-color:#800;
top:36px;
height:2px;
border-bottom:solid 1px #C00;
z-index: 1;
position: absolute;
overflow:hidden;
}
#sses1 li a
{
box-sizing: content-box;
height:30px;
padding-top: 8px;
margin: 0 20px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/
color: #fff;
font: normal 12px arial;
text-align: center;
text-decoration: none;
float: left;
display: block;
position: relative;
z-index: 2;
}
حال کدهای جاوا اسکریپ که بدین منظور باید درج شود را اضافه می نماییم.
var sse1 = function () {
var rebound = 20; //set it to 0 if rebound effect is not prefered
var slip, k;
return {
buildMenu: function () {
var m = document.getElementById('sses1');
if(!m) return;
var ul = m.getElementsByTagName("ul")[0];
m.style.width = ul.offsetWidth+1+"px";
var items = m.getElementsByTagName("li");
var a = m.getElementsByTagName("a");
slip = document.createElement("li");
slip.className = "highlight";
ul.appendChild(slip);
var url = document.location.href.toLowerCase();
k = -1;
var nLength = -1;
for (var i = 0; i < a.length; i++) {
if (url.indexOf(a[i].href.toLowerCase()) != -1 && a[i].href.length > nLength) {
k = i;
nLength = a[i].href.length;
}
}
if (k == -1 && /:\/\/(?:www\.)?[^.\/]+?\.[^.\/]+\/?$/.test) {
for (var i = 0; i < a.length; i++) {
if (a[i].getAttribute("maptopuredomain") == "true") {
k = i;
break;
}
}
if (k == -1 && a[0].getAttribute("maptopuredomain") != "false")
k = 0;
}
if (k > -1) {
slip.style.width = items[k].offsetWidth + "px";
//slip.style.left = items[k].offsetLeft + "px";
sse1.move(items[k]); //comment out this line and uncomment the line above to disable initial animation
}
else {
slip.style.visibility = "hidden";
}
for (var i = 0; i < items.length - 1; i++) {
items[i].on-mouseover = function () {
if (k == -1) slip.style.visibility = "visible";
if (this.offsetLeft != slip.offsetLeft) {
sse1.move(this);
}
}
}
m.on-mouseover = function () {
if (slip.t2)
slip.t2 = clearTimeout(slip.t2);
};
m.on-mouseout = function () {
if (k > -1 && items[k].offsetLeft != slip.offsetLeft) {
slip.t2 = setTimeout(function () { sse1.move(items[k]); }, 50);
}
if (k == -1) slip.t2 = setTimeout(function () { slip.style.visibility = "hidden"; }, 50);
};
},
move: function (target) {
clearInterval(slip.timer);
var direction = (slip.offsetLeft < target.offsetLeft) ? 1 : -1;
slip.timer = setInterval(function () { sse1.mv(target, direction); }, 15);
},
mv: function (target, direction) {
if (direction == 1) {
if (slip.offsetLeft - rebound < target.offsetLeft)
this.changePosition(target, 1);
else {
clearInterval(slip.timer);
slip.timer = setInterval(function () {
sse1.recoil(target, 1);
}, 15);
}
}
else {
if (slip.offsetLeft + rebound > target.offsetLeft)
this.changePosition(target, -1);
else {
clearInterval(slip.timer);
slip.timer = setInterval(function () {
sse1.recoil(target, -1);
}, 15);
}
}
this.changeWidth(target);
},
recoil: function (target, direction) {
if (direction == -1) {
if (slip.offsetLeft > target.offsetLeft) {
slip.style.left = target.offsetLeft + "px";
clearInterval(slip.timer);
}
else slip.style.left = slip.offsetLeft + 2 + "px";
}
else {
if (slip.offsetLeft < target.offsetLeft) {
slip.style.left = target.offsetLeft + "px";
clearInterval(slip.timer);
}
else slip.style.left = slip.offsetLeft - 2 + "px";
}
},
changePosition: function (target, direction) {
if (direction == 1) {
//following +1 will fix the IE8 bug of x+1=x, we force it to x+2
slip.style.left = slip.offsetLeft + Math.ceil(Math.abs(target.offsetLeft - slip.offsetLeft + rebound) / 10) + 1 + "px";
}
else {
//following -1 will fix the Opera bug of x-1=x, we force it to x-2
slip.style.left = slip.offsetLeft - Math.ceil(Math.abs(slip.offsetLeft - target.offsetLeft + rebound) / 10) - 1 + "px";
}
},
changeWidth: function (target) {
if (slip.offsetWidth != target.offsetWidth) {
var diff = slip.offsetWidth - target.offsetWidth;
if (Math.abs(diff) < 4) slip.style.width = target.offsetWidth + "px";
else slip.style.width = slip.offsetWidth - Math.round(diff / 3) + "px";
}
}
};
} ();
if (window.addEventListener) {
window.addEventListener("load", sse1.buildMenu, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", sse1.buildMenu);
}
else {
window["onload"] = sse1.buildMenu;
}
با درج کدهای بالا می توانید منویی با افکت های زیبای جاوا را داشته باشید و در زیبایی طراحی سایت خود بیفزایید.
منبع: طراحی سایت
