linkedin facebook linkedin facebook nod32

Sayt uchun vertikal harakatlanuvchi menyu

Muallif: Mengliyev SH.

Qo`shilgan sana: 2014-10-22

Sayt uchun vertikal harakatlanuvchi menyu

Index.html faylni hosil qilib olamiz

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Slashdot's Menu</title>

<link rel="stylesheet" type="text/css" href="sdmenu.css" />

<script type="text/javascript" src="sdmenu.js">

</script>

<script type="text/javascript">

// <![CDATA[

var myMenu;

window.onload = function() {

myMenu = new SDMenu("my_menu");

myMenu.init();

};

// ]]>

</script>

  </head>

  <body>

    <div style="float: centre" id="my_menu" class="sdmenu">

      <div>

        <span>Online Tools</span>

        <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>

        <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>

        <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>

        <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>

        <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>

        <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>

      </div>

      <div>

        <span>Support Us</span>

        <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>

        <a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>

        <a href="http://www.dynamicdrive.com/resources/">Web Resources</a>

      </div>

      <div class="collapsed">

        <span>Partners</span>

        <a href="http://www.javascriptkit.com">JavaScript Kit</a>

        <a href="http://www.cssdrive.com">CSS Drive</a>

        <a href="http://www.codingforums.com">CodingForums</a>

        <a href="http://www.dynamicdrive.com/style/">CSS Examples</a>

      </div>

      <div>

        <span>Test Current</span>

        <a href="?foo=bar">Current or not</a>

        <a href="./">Current or not</a>

        <a href="index.html">Current or not</a>

        <a href="index.html?query">Current or not</a>

      </div>

    </div>

 </body>

</html>

Sdmenu.css css fayl quyidagi ko`rinishda bo`ladi

div.sdmenu {

width: 150px;

font-family: Arial, sans-serif;

font-size: 12px;

padding-bottom: 10px;

background: url(bottom.gif) no-repeat  right bottom;

color: #fff;

}

div.sdmenu div {

background: url(title.gif) repeat-x;

overflow: hidden;

}

div.sdmenu div:first-child {

background: url(toptitle.gif) no-repeat;

}

div.sdmenu div.collapsed {

height: 25px;

}

div.sdmenu div span {

display: block;

padding: 5px 25px;

font-weight: bold;

color: white;

background: url(expanded.gif) no-repeat 10px center;

cursor: default;

border-bottom: 1px solid #ddd;

}

div.sdmenu div.collapsed span {

background-image: url(collapsed.gif);

}

div.sdmenu div a {

padding: 5px 25px;

background: #eee;

display: block;

border-bottom: 1px solid #ddd;

color: #066;

}

div.sdmenu div a.current {

background : #ccc;

}

div.sdmenu div a:hover {

background : #066 url(linkarrow.gif) no-repeat right center;

color: #fff;

text-decoration: none;

}

Sdmenu.js quyidagicha bo`ladi

function SDMenu(id) {

if (!document.getElementById || !document.getElementsByTagName)

return false;

this.menu = document.getElementById(id);

this.submenus = this.menu.getElementsByTagName("div");

this.remember = true;

this.speed = 3;

this.markCurrent = true;

this.oneSmOnly = false;

}

SDMenu.prototype.init = function() {

var mainInstance = this;

for (var i = 0; i < this.submenus.length; i++)

this.submenus[i].getElementsByTagName("span")[0].onclick = function() {

mainInstance.toggleMenu(this.parentNode);

};

if (this.markCurrent) {

var links = this.menu.getElementsByTagName("a");

for (var i = 0; i < links.length; i++)

if (links[i].href == document.location.href) {

links[i].className = "current";

break;

}

}

if (this.remember) {

var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");

var match = regex.exec(document.cookie);

if (match) {

var states = match[1].split("");

for (var i = 0; i < states.length; i++)

this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");

}

}

};

SDMenu.prototype.toggleMenu = function(submenu) {

if (submenu.className == "collapsed")

this.expandMenu(submenu);

else

this.collapseMenu(submenu);

};

SDMenu.prototype.expandMenu = function(submenu) {

var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;

var links = submenu.getElementsByTagName("a");

for (var i = 0; i < links.length; i++)

fullHeight += links[i].offsetHeight;

var moveBy = Math.round(this.speed * links.length);

var mainInstance = this;

var intId = setInterval(function() {

var curHeight = submenu.offsetHeight;

var newHeight = curHeight + moveBy;

if (newHeight < fullHeight)

submenu.style.height = newHeight + "px";

else {

clearInterval(intId);

submenu.style.height = "";

submenu.className = "";

mainInstance.memorize();

}

}, 30);

this.collapseOthers(submenu);

};

SDMenu.prototype.collapseMenu = function(submenu) {

var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;

var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);

var mainInstance = this;

var intId = setInterval(function() {

var curHeight = submenu.offsetHeight;

var newHeight = curHeight - moveBy;

if (newHeight > minHeight)

submenu.style.height = newHeight + "px";

else {

clearInterval(intId);

submenu.style.height = "";

submenu.className = "collapsed";

mainInstance.memorize();

}

}, 30);

};

SDMenu.prototype.collapseOthers = function(submenu) {

if (this.oneSmOnly) {

for (var i = 0; i < this.submenus.length; i++)

if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")

this.collapseMenu(this.submenus[i]);

}

};

SDMenu.prototype.expandAll = function() {

var oldOneSmOnly = this.oneSmOnly;

this.oneSmOnly = false;

for (var i = 0; i < this.submenus.length; i++)

if (this.submenus[i].className == "collapsed")

this.expandMenu(this.submenus[i]);

this.oneSmOnly = oldOneSmOnly;

};

SDMenu.prototype.collapseAll = function() {

for (var i = 0; i < this.submenus.length; i++)

if (this.submenus[i].className != "collapsed")

this.collapseMenu(this.submenus[i]);

};

SDMenu.prototype.memorize = function() {

if (this.remember) {

var states = new Array();

for (var i = 0; i < this.submenus.length; i++)

states.push(this.submenus[i].className == "collapsed" ? 0 : 1);

var d = new Date();

d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));

document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" 

+ states.join("") + "; expires=" + d.toGMTString() + "; path=/";

}

}; 

2041 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений