Menyu düzəltmək, link vermək

Salam.Bu sualı dəqiq necə yazacağımı bilmirəm. Məsələn: president.az saytına daxil olduqda, deyək ki, mausun düyməsini “Xəbərlər” bölməsinin üzərinə gətiririk, düyməni basmadan, orada “Görüşlər” “Tədbirlər” “Qəbullar” və s. kimi görsənir. Bunu necə etmək olar? Bunun kodları necədir? Əgər tam olaraq, nə demək istədiyimi başa düşən olmadısa, o zaman həmin sayta daxil olub, Dediyim bölməyə, başqa bölmələrə də baxa bilərsiz. Bu haqda bilən varsa, zəhmət olmasa, mənə kömək etsin. Təşəkkür.

Sualı verdi: Cavid_q (02/06/2011)

Yadda saxlama

bölmə, sayt. Qısa keçid.

Verilmiş cavablar və yazılan şərhlər (6 cavab var)

E. Hacı

(15:39, 02/06/2011 ) #2680

Salam. Bu dediyiniz CSS treeview menu adlanır. Bu sözlərlə axtarsanız internetdən çoxlu hazır menyu kodları tapa bilərsiniz.
Ümumiyyətlə sualdan hiss olunur ki, CSS və Javascript haqda məlumatınız bir qədər azdır. html, css, javascripti http://w3schools.com saytından öyrənin, çox asandır, ondan sonra artıq sizə nəsə lazım olanda termin olaraq adını biləcəksiniz və axtarmaq da asan olacaq.
Sualınızdakı menyulara nümunələr: http://www.cssmenusamples.com/
Üstəgəl hansı saytda görmüsünüzsə, o saytın source code-na daxil olaraq elə o saytdan da götürə bilərsiniz menyu kodları.

Cavablamaq üçün sağ sütundan hesaba daxil olmaq lazımdır

Cavid_q

(16:07, 02/06/2011 ) #2681

Salam Admin Siz elə bir kodu hazır mənə yaza bilərsiz? Məsələn: elə dediyim saytın. Yoxlayım, baxım necə işləyir?

Cavablamaq üçün sağ sütundan hesaba daxil olmaq lazımdır

E. Hacı

(16:43, 02/06/2011 ) #2682

O saytda tək bir kod deyil. Js və CSS faylları da import olunur.
Nümunə kimi sizə 10-larla nümunənin olduğu sayt ünvanı verdim.
Əlavə nümunə istəyirsinizsə css,js,html-i bir yerdə yazıb nümunə verim.

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5<title>CSSnewbie Example: CSS-Only Dropdown Menu</title>
6<style>
7/* These styles just pretty up the page a bit. */
8body {
9   font: 62.5%/1.2 Arial, Helvetica, sans-serif;
10   background-color: #eee; }
11#wrap {
12   font-size: 1.3em;
13   width: 500px;
14   padding: 20px;
15   margin: 0 auto; 
16   background-color: #fff;
17   position: relative; }
18 
19/* These styles create the dropdown menus. */
20#navbar {
21   margin: 0;
22   padding: 0;
23   height: 1em; }
24#navbar li {
25   list-style: none;
26   float: left; }
27#navbar li a {
28   display: block;
29   padding: 3px 8px;
30   background-color: #5e8ce9;
31   color: #fff;
32   text-decoration: none; }
33#navbar li ul {
34   display: none; 
35   width: 10em; /* Width to help Opera out */
36   background-color: #69f;}
37#navbar li:hover ul, #navbar li.hover ul {
38   display: block;
39   position: absolute;
40   margin: 0;
41   padding: 0; }
42#navbar li:hover li, #navbar li.hover li {
43   float: none; }
44#navbar li:hover li a, #navbar li.hover li a {
45   background-color: #69f;
46   border-bottom: 1px solid #fff;
47   color: #000; }
48#navbar li li a:hover {
49   background-color: #8db3ff; }
50</style>
51 
52<script>
53// Javascript originally by Patrick Griffiths and Dan Webb.
54// http://htmldog.com/articles/suckerfish/dropdowns/
55sfHover = function() {
56   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
57   for (var i=0; i<sfEls.length; i++) {
58      sfEls[i].onmouseover=function() {
59         this.className+=" hover";
60      }
61      sfEls[i].onmouseout=function() {
62         this.className=this.className.replace(new RegExp(" hover\\b"), "");
63      }
64   }
65}
66if (window.attachEvent) window.attachEvent("onload", sfHover);
67</script>
68 
69</head>
70<body>
71   <div id="wrap">
72      <h1>CSS-Only Dropdown Menu</h1>
73      <ul id="navbar">
74      <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
75         <li><a href="#">Item One</a><ul>
76            <li><a href="#">Subitem One</a></li><li>
77            <a href="#">Second Subitem</a></li><li>
78            <a href="#">Numero Tres</a></li></ul>
79         </li>
80         <li><a href="#">Second Item</a>
81            <ul>
82               <li><a href="#">Just one subitem</a></li></ul>
83         </li>
84         <li><a href="#">No Subitem</a></li>
85         <li><a href="#">Number Four</a>
86            <ul>
87               <li><a href="#">Subitem One</a></li><li>
88               <a href="#">Second Subitem</a></li><li>
89               <a href="#">Numero Tres</a></li><li>
90               <a href="#">Fourth Thinger</a></li></ul>         
91         </li>
92      </ul>
93      <p><a href="/easy-css-dropdown-menus/">Go back to the main article.</a> This CSS-only dropdown menu should work in all modern browsers. It has been tested and found working in Firefox 2, IE 7, Safari 3, and Opera 8.5. With the included JavaScript, the dropdowns also work in IE 6 (the all-important non-modern browser).</p>
94      <p>Donec vel massa. Ut nibh. Donec placerat ultrices dui. Morbi eu dui eget mauris cursus pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ante neque, tempor eu, semper sit amet, hendrerit vitae, quam. Nullam ante. Pellentesque arcu sapien, suscipit in, elementum vitae, vulputate quis, metus. Quisque sollicitudin leo a diam. Quisque in risus sit amet mi faucibus feugiat. Ut ullamcorper pede a libero. Donec nisl.</p>
95   </div>
96 
97</body>
98</html>