Помощ - Търсене - Потребители - Събития
Пълна версия: Малко css менюта за вашия сайт
GGbit.info > Hi-Tech > Web разработка > Полезни статии
akolevutd
Код
<html>
   <head>
      <title></title>
      <style type="text/css">
         a.btn {display: block; background: #c0c0c0; height: 10px; width:20; padding: 20px;}
         a.btn:hover {background: #3a6998;}
      </style>
   </head>

   <body>
      <a href="#" class="btn">link</a>

      <a href="#" class="btn">link</a>
      <a href="#" class="btn">link</a>
      <br style="clear:both;" />
   </body>
</html>

Демо

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
      <head>
         <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
         &lt;script src="scripts/scripts.js" type="text/javascript"></script>
         <style type="text/css">
            html, body{background: black;}
        
            div.menu {  
               width: 207px; float: left; margin-top: 20px;
               text-align: left;
            }

            div.menu a {
               text-indent: 10px;
               display: block;
               width: 100%;
            }

            div.menu ul {
               display: none;
               list-style-type: none;
               margin: 0px; padding: 0px;
              
            }

            div.menu ul li a, div.menu ul li a:hover{
               text-indent: 20px;
               line-height: 18px;
               text-decoration: none;
               color: #fff; padding-bottom: 2px;
               font-size: 11px;
              
            }
        
            div.menu a:hover {color: #fff; background: #2B77A9;}
            .button1 { margin-top: 4px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; border: 1px solid #2B77A9; border-left: 0px; border-right: 0px; padding-bottom: 1px; line-height: 20px; text-decoration: none; color: #FFFFFF;}
            div.menu ul a:hover {color: #fff; background: #2B77A9; text-indent: 15px;}
         </style>
         &lt;script language="Javascript" type="text/javascript">
            function openmenu(subid) {
               var count=document.getElementById('menu').getElementsByTagName('UL').length;
               if(document.getElementById(subid).style.display=='block')
                  document.getElementById(subid).style.display='none';
               else {
                  for(var i=0; i<count; i++)
                     document.getElementById('sub'+(i+1)).style.display='none';
                  document.getElementById(subid).style.display='block';
               }
            }
         </script>
      </head>

   <body>
      <div class="menu" id="menu">
         <a href="java script:openmenu('sub1');" class="button1">011111111</a>
            <ul id="sub1">
               <li><a href="#">111111111</a></li>
               <li><a href="#">222222222</a></li>
               <li><a href="#">333333333</a></li>

            </ul>
         <a href="java script:openmenu('sub2');" class="button1">0222222222</a>
            <ul id="sub2" >
               <li><a href="#">1111111111</a></li>
               <li><a href="#">2222222222</a></li>
               <li><a href="#">3333333333</a></li>
            </ul>

      </div>
   </body>
</html>

Демо

Код
<style type="text/css">
a{text-decoration:none;color:red;float:left;}
a:hover{cursor:pointer}
div{border:1px solid black;border-top:0px;width:5cm;background-color:#44687b;color:silver}
div#da{background-color:silver;color:red;text-align:center}
div:hover{background:silver;color:red}
span{display:none}
a:hover span{display:block}
</style>
<body>
<a href="#">
<div id="da">Меню</div>
<span onClick="window.open('http://data.bg')"><div>»data.bg</div></span>
<span onClick="window.open('http://free.bg')"><div>»free.bg</div></span>
<span onClick="window.open('http://aha.bg')"><div>»aha.bg</div></span>
</a>
<a href="#">
<div id="da">Меню2</div>
<span onClick="window.open('http://data.bg')"><div>»data.bg</div></span>

<span onClick="window.open('http://free.bg')"><div>»free.bg</div></span>
<span onClick="window.open('http://aha.bg')"><div>»aha.bg</div></span>
<span onClick="window.open('http://free.bol.bg')"><div>»free.bol.bg</div></span>
<span onClick="window.open('http://arenabg.com')"><div>»arenabg.com</div></span>
<span onClick="window.open('http://zamunda.net')"><div>»zamunda.net</div></span>
</a>
<a href="#">
<div id="da">Меню3</div>
<span onClick="window.open('http://data.bg')"><div>»data.bg</div></span>

<span onClick="window.open('http://free.bg')"><div>»free.bg</div></span>

<span onClick="window.open('http://aha.bg')"><div>»aha.bg</div></span>
<span onClick="window.open('http://free.bol.bg')"><div>»free.bol.bg</div></span>
</a>
</body>

Демо

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
      <style type="text/css">
         body {margin: 0px;}
         #menu ul {width: 150px; height: 200px; padding: 0px; margin: 0px; list-style-type: none;}
         #menu li {width: 150px; height: 20px;}
         #menu a {
            display: block;
            width: 100%;
            height: 100%;
            background-color: black;
            color: white;
            font-size: 12px;
            font-family: Verdana, serif;
            text-decoration: none;
            text-align: center;
            }
         #menu a:hover {background-color: #006699;}
      </style>
   </head>

   <body>
      <div id="menu">
         <ul>
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
         </ul>

      </div>
   </body>

</html>

Демо

Код
<html>
<head>
<style type="text/css">
#nav a {
border: 1px solid #DDDDDD;
padding: 4px;
background-color: #F3F3F3;
color: #0077B4;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Sans-Serif;
font-size: 12px;
}
#nav a:hover {
color: #00A8FF;
background-color: #ffffff;
border: 1px solid #727272;
border-bottom: 1px solid #ffffff;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">kolev</a>
<a href="#">akolevutd</a>
<a href="#">!sako.kolev!</a>
<a href="#">Sandi Koen</a>
<a href="#">GGBiT</a>
</div>
</body>
</html>


Демо

Мисля че с тези четири вида менюта, ще можете да направите каквито си искате ефектни менюта за вашия сайт. В тях се крие основата. Променяйте ги, пренаписвайте ги, модвайте ги, съединявайте ги и дерзайте smile.gif

ПС: част от скриптовете са писани от faicheto и crazycarp. Всеки който желае може да ги разпространява без никакви уговорки.

Следва продължение...
Relevant Advertise!
advokata
Хмммм , не са лоши... rolleyes.gif
akolevutd
Дървовидно меню. менюто е написано от faicheto, заоблените ъгли от мен:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg" >
<head>
<style type="text/css">
*{
        margin: 0; padding: 0;
}
            
div#nifty {
        width: 167px;
        margin-top: 20px;
        margin-left: 450px;
        background: #979185
    }
b.rtop, b.rbottom {
        display:block;
        background: #FFF
    }
b.rtop b, b.rbottom b
        {display:block;
        height: 1px;
        overflow: hidden;
        background: #979185
    }
b.r1 { margin: 0 5px }
b.r2 { margin: 0 3px }
b.r3 { margin: 0 2px }
b.rtop b.r4, b.rbottom b.r4 { margin: 0 1px;height: 2px }


            
            html, body{
                font-family: Verdana, Arial, sans-serif;
                font-size: 11px; color: #fff;
            }
            
            ul.menu{
                width: 160px; list-style-type: none; border: 0px; margin: 0 auto;
            }
            
            ul.menu li{
                width: 100%; clear: left;
            }
            
            ul.menu li a{
                color: #fff; text-decoration: none;    height: 21px; background: #979185 url('arrow_down.gif') 140px 14px no-repeat;
                display: block; padding: 8px 0 0 15px; border-bottom: 1px solid #A29E92;
            }
            
            ul.menu li a:hover{
                background: #888377 url('arrow_down.gif') 140px 14px no-repeat;
            }
            
            ul.menu li ul a{
                height: 21px; width: 135px; padding: 8px 0 0 25px;
                background: #D8D2C2; color: #545045; border-bottom: 1px solid #E4DECF;
            }
            
            ul.menu li ul a:hover{
                background: #B4AEA0; color: #111;
            }
            
            .down_open{
                background: #888377; font-weight: bold;
            }
            
            .unactive{background-image: none!important;}
        </style>
        <script type="text/javascript">
            function expand_nav(link)
            {
                var ul = find_enclosing_ul(link)
                if (ul.style.display == 'none')
                {
                    ul.style.display = 'block'
                }
                else
                {
                    ul.style.display = 'none'
                }
                if (link.className == 'down')
                {
                    link.className='down_open'
                }
                else
                {
                    link.className='down'
                }
            }
            
            function find_enclosing_ul(link)
            {
                var search_node = link
                while (true)
                {
                    var node = search_node.nextSibling
                    if (node && node.nodeName == 'UL')
                    {
                        break
                    }
                    else
                    {
                        search_node = node
                    }
                }
                return node    
            }
        </script>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
        <ul class="menu">
            <li><a href="#" class="unactive">Item 1</a></li>          
            <li><a href="#" class="down" onclick="expand_nav(this); return false;">Item 2</a>

                <ul style="display: none;">
                    <li><a href="#">Sub Item 2.1</a></li>  
                    <li><a href="#">Sub Item 2.2</a></li>  
                    <li><a href="#">Sub Item 2.3</a></li>  
                </ul>

            </li>  
            <li><a href="#" class="down" onclick="expand_nav(this); return false;">Item 3</a>
                <ul style="display: none;">

                    <li><a href="#">Sub Item 3.1</a></li>      
                    <li><a href="#">Sub Item 3.2</a></li>      
                    <li><a href="#">Sub Item 3.3</a></li>      
                </ul>
            </li>    
            <li><a href="#" class="unactive" onclick="expand_nav(this); return false;">Item 4</a>

            <li><a href="#" class="down" onclick="expand_nav(this); return false;">Item 5</a>
                <ul style="display: none;">

                    <li><a href="#">Sub Item 5.1</a></li>      
                    <li><a href="#">Sub Item 5.2</a></li>      
                    <li><a href="#">Sub Item 5.3</a></li>      
                </ul>
            </li>
            <li><a href="#" class="unactive">Item 6</a></li>                
        </ul>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>


Демо
bLex
е това вече е много добро.Браво
advokata
Моля давайте демотата в друг саит , че не мога да отворя датата (в германия съм). blush.gif worthy.gif rolleyes.gif
vIkToRsHeFa
Само да вметна че "java script" трябва да е една дума във сорсовете по-горе... Просто форума я разделя на две като допълнителна защита от XSS атаки посредством джаваскрипт. blush.gif
akolevutd
добра вметка smile.gif
advokata: тук вече виждаш ли го защото фрийхостия не ми го отваря...
advokata
Вече ги виждам. Благодаря.
Dжydж
Цитат(akolevutd @ Aug 4 2007, 17:58) *
Дървовидно меню. менюто е написано от faicheto, заоблените ъгли от мен:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg" >
<head>
<style type="text/css">
*{
        margin: 0; padding: 0;
}
            
div#nifty {
        width: 167px;
        margin-top: 20px;
        margin-left: 450px;
        background: #979185
    }
b.rtop, b.rbottom {
        display:block;
        background: #FFF
    }
b.rtop b, b.rbottom b
        {display:block;
        height: 1px;
        overflow: hidden;
        background: #979185
    }
b.r1 { margin: 0 5px }
b.r2 { margin: 0 3px }
b.r3 { margin: 0 2px }
b.rtop b.r4, b.rbottom b.r4 { margin: 0 1px;height: 2px }


            
            html, body{
                font-family: Verdana, Arial, sans-serif;
                font-size: 11px; color: #fff;
            }
            
            ul.menu{
                width: 160px; list-style-type: none; border: 0px; margin: 0 auto;
            }
            
            ul.menu li{
                width: 100%; clear: left;
            }
            
            ul.menu li a{
                color: #fff; text-decoration: none;    height: 21px; background: #979185 url('arrow_down.gif') 140px 14px no-repeat;
                display: block; padding: 8px 0 0 15px; border-bottom: 1px solid #A29E92;
            }
            
            ul.menu li a:hover{
                background: #888377 url('arrow_down.gif') 140px 14px no-repeat;
            }
            
            ul.menu li ul a{
                height: 21px; width: 135px; padding: 8px 0 0 25px;
                background: #D8D2C2; color: #545045; border-bottom: 1px solid #E4DECF;
            }
            
            ul.menu li ul a:hover{
                background: #B4AEA0; color: #111;
            }
            
            .down_open{
                background: #888377; font-weight: bold;
            }
            
            .unactive{background-image: none!important;}
        </style>
        &lt;script type="text/javascript">
            function expand_nav(link)
            {
                var ul = find_enclosing_ul(link)
                if (ul.style.display == 'none')
                {
                    ul.style.display = 'block'
                }
                else
                {
                    ul.style.display = 'none'
                }
                if (link.className == 'down')
                {
                    link.className='down_open'
                }
                else
                {
                    link.className='down'
                }
            }
            
            function find_enclosing_ul(link)
            {
                var search_node = link
                while (true)
                {
                    var node = search_node.nextSibling
                    if (node && node.nodeName == 'UL')
                    {
                        break
                    }
                    else
                    {
                        search_node = node
                    }
                }
                return node    
            }
        </script>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
        <ul class="menu">
            <li><a href="#" class="unactive">Item 1</a></li>          
            <li><a href="#" class="down" onclick="expand_nav(this); return false;">Item 2</a>

                <ul style="display: none;">
                    <li><a href="#">Sub Item 2.1</a></li>  
                    <li><a href="#">Sub Item 2.2</a></li>  
                    <li><a href="#">Sub Item 2.3</a></li>  
                </ul>

            </li>  
            <li><a href="#" class="down" onclick="expand_nav(this); return false;">Item 3</a>
                <ul style="display: none;">

                    <li><a href="#">Sub Item 3.1</a></li>      
                    <li><a href="#">Sub Item 3.2</a></li>      
                    <li><a href="#">Sub Item 3.3</a></li>      
                </ul>
            </li>    
            <li><a href="#" class="unactive" onclick="expand_nav(this); return false;">Item 4</a>

            <li><a href="#" class="down" onclick="expand_nav(this); return false;">Item 5</a>
                <ul style="display: none;">

                    <li><a href="#">Sub Item 5.1</a></li>      
                    <li><a href="#">Sub Item 5.2</a></li>      
                    <li><a href="#">Sub Item 5.3</a></li>      
                </ul>
            </li>
            <li><a href="#" class="unactive">Item 6</a></li>                
        </ul>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>


Демо


Само не мога да схвана къде точно да въведа адреса към който да води препратката.. предполагам, че това е тъп въпрос, ама общо взето почти не съм се занимавала с такива работи. unsure.gif
ogata
Пример

Код
....
<li><a href="#">Sub Item 5.1</a></li>
...


На мястото на # слагаш линка до сайта
На мястото на Sub Item 5.1 - слагаш маската на линка

Резултат
Код
....
<li><a href="http://ggbit.info">GGbit.info</a></li>
...


С две думи ще имаш надпис ggbit.info в менюто и като кликнеш на него ще те препрати към страницата на ggbit.info
Има вече допълнителни настройки , ако желаеш препратката да се отвори в текущия прозорец или в нов такъв ... или дори като pop-up прозорец smile.gif
Dжydж
Мерсии многооо! bigarmhug.gif happy.gif
Това е "lo-fi" версия на нашия форум. За да видите пълната версия, моля натиснете тук.
Invision Power Board © 2001-2018 Invision Power Services, Inc.