Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Site of furniture workshop.
#1
One more site using GetSimple. http://www.sv-deva.ru
Thank to the developers by this CMS. It is very interesting to work. Web-design for me hobby, therefore simplicity has a priority.
Reply
#2
This is very ineresting with the Sub-menu!
Would you please share with us- how did you do it using JQuery? I'd appreciate if you help me out with a step by step procedure.

Thanks in advance.
Reply
#3
tweenpath Wrote:This is very ineresting with the Sub-menu!Would you please share with us- how did you do it using JQuery? I'd appreciate if you help me out with a step by step procedure.Thanks in advance.
Hi..
I for a submenu used plugin " Zegnat’s multi-level navigation. ": http://get-simple.info/forum/viewtopic.php?id=721, but it creates only structure of the menu.
Work CSS is required further. I have made it so:
CSS.
Code:
.menu {
     list-style: none;
     width: 680px;
     height: 24px;
     margin: 0;
     padding: 0 20px 0 20px;
     font: 13px/24px Complex, Georgia, Times New Roman, Times, serif;
}    
.menu li {
     float: left;
     display: block;
     position: relative;
     z-index: 500;
     margin: 0;
}    
.menu li a {
     display:block;
     height:24px;
     text-decoration:none;
     display: block;
     width: 110px;
     padding: 0 13px;
     color: #585858;
     text-align: center;
}
.menu li a:hover {
     color: #AC4B49;
}
.menu li.active a {
     color: #AC4B49;
}    
.menu ul {
     position:absolute;
     left:0;
     display:none;
     margin:0 0 0 -1px;
     padding:0;
     list-style:none;
}        
.menu ul li {
     width:110px;
     font: 12px/22px Complex, Georgia, Times New Roman, Times, serif;    
     float:left;
}
.menu ul a {
     display:block;  
     height:24px;
     padding: 0 13px;
     color: #585858;
     background: #E2E2E2;
     border-top: 1px solid #FDFDFC;
}
But. It not correctly works in IE7 and IE6. IE7 the property <z-index> does not understand and the menu was hidden under the image. IE6 understands property <hover> only for <a> and there menu did not work.
Therefore I used JQuery. Has connected library:
Code:
< script type = "text/javascript" src = " <? php get_theme_url ();? > /js/jquery-1.4.2.min.js " > </script>
( Plugin jquery-1.4.2.min.js has put in a folder js in a subject) and between <head> has inserted the script:
Code:
< script type = "text/javascript" >
         $ (document) .ready (function () {    
             $ ('.menu li ') .hover (
                 function () {
                     // show its submenu
                     $ ('ul', this) .slideDown (100);
                },
                 function () {
                     // hide its submenu
                     $ ('ul', this) .slideUp (100);            
                }
            );
        });
     </script>
That's all cunnings.
Sorry. I could not answer quickly.
Reply
#4
Hi Alex,

It was excellent tip and I really do appreciate your quick response. Thanks a zillion!
Reply




Users browsing this thread: 1 Guest(s)