WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Jquery navigation help Empty Jquery navigation help Fri Oct 01, 2010 12:26 am

Emilio

Emilio
Registered Member
Registered Member
http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial

Is it possible to put that in a portal widget?

http://www.graphilicious.forumotion.Com

2Jquery navigation help Empty Re: Jquery navigation help Fri Oct 01, 2010 1:51 am

blindbat1457


Registered Member
Registered Member
Try it out Razz

I would imagine it would work but not sure if they support JS.

Here is what it looks like on my forum:
http://thisisatest.forumotion.com/portal.htm

Not sure if I did something wrong :/ Right hand side.

3Jquery navigation help Empty Re: Jquery navigation help Fri Oct 01, 2010 2:25 am

Guest


Guest
try it just follow the steps Smile

4Jquery navigation help Empty Re: Jquery navigation help Fri Oct 01, 2010 2:40 am

Emilio

Emilio
Registered Member
Registered Member
Well i added all codes to widgets but doesn't show anything on the portal...
Can someone try it? and please share the code?

http://www.graphilicious.forumotion.Com

5Jquery navigation help Empty Re: Jquery navigation help Fri Oct 01, 2010 9:14 am

ankillien

ankillien
Administrator
Administrator
Hey,It is possible on FM since it only requires JS.

Have you downloaded the files they provide? You need them. There are about 16 images and 2 JS files. Once you get them, upload those files to your host.

Now, in the portal widget, you can link the JS files using this code...

Code:
<script type="text/javascript" src="LINK TO THE JS FILE"></script>

Link both the JS files using this code. Now upload the images and link them to the CSS codes, wherever it says background: url(...).

The CSS codes can be added inside <style></style> tags on in the stylesheet in the admin panel. HTML codes can be added after the <script> tags.

It should be working now.

6Jquery navigation help Empty Re: Jquery navigation help Sat Oct 02, 2010 2:14 am

Emilio

Emilio
Registered Member
Registered Member
So i need to place the JS codes in a new html page?
And all the codes inside the widget ?

http://www.graphilicious.forumotion.Com

7Jquery navigation help Empty Re: Jquery navigation help Sat Oct 02, 2010 9:39 am

ankillien

ankillien
Administrator
Administrator
The JS codes can be added in the widget itselt. It should go like this..

Code:
<script type="text/javascript">
// your js code here
</script>

8Jquery navigation help Empty Re: Jquery navigation help Sat Oct 02, 2010 9:42 am

Emilio

Emilio
Registered Member
Registered Member
Anki , i'm begging you.
Could u put the code together? if possible?

http://www.graphilicious.forumotion.Com

9Jquery navigation help Empty Re: Jquery navigation help Sat Oct 02, 2010 2:10 pm

Guest


Guest
Emilio wrote:Anki , i'm begging you.
Could u put the code together? if possible?

you want the copy paste code?

10Jquery navigation help Empty Re: Jquery navigation help Sat Oct 02, 2010 2:36 pm

Emilio

Emilio
Registered Member
Registered Member
Yes please

http://www.graphilicious.forumotion.Com

11Jquery navigation help Empty Re: Jquery navigation help Sun Oct 03, 2010 5:18 am

Emilio

Emilio
Registered Member
Registered Member
Please?

http://www.graphilicious.forumotion.Com

12Jquery navigation help Empty Re: Jquery navigation help Sun Oct 03, 2010 11:01 am

ankillien

ankillien
Administrator
Administrator
Ok I'll give you the whole code. I need some time.

13Jquery navigation help Empty Re: Jquery navigation help Sun Oct 03, 2010 1:53 pm

Guest


Guest
heres the code:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tab Menu</title>

<script type="text/javascript" src="http://freshydesigns.webs.com/jquery/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {   


  //Get all the LI from the #tabMenu UL
  $('#tabMenu > li').click(function(){
   
    //perform the actions when it's not selected
    if (!$(this).hasClass('selected')) {   
         
    //remove the selected class from all LI   
    $('#tabMenu > li').removeClass('selected');
   
    //Reassign the LI
    $(this).addClass('selected');
   
    //Hide all the DIV in .boxBody
    $('.boxBody div').slideUp('1500');
   
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
   
  }
   
  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest   
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout'); 
   
  }).mouseout(function() {
   
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');   
   
  });

    //Mouseover with animate Effect for Category menu list
  $('.boxBody #category li').click(function(){

    //Get the Anchor tag href under the LI
    window.location = $(this).children().attr('href');
  }).mouseover(function() {

    //Change background color and animate the padding
    $(this).css('backgroundColor','#888');
    $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
   
    //Change background color and animate the padding
    $(this).css('backgroundColor','');
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  }); 
   
    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  $('#.boxBody li').click(function(){
    window.location = $(this).children().attr('href');
  }).mouseover(function() {
    $(this).css('backgroundColor','#888');
  }).mouseout(function() {
    $(this).css('backgroundColor','');
  });     
   
});

</script>
<style>
body{font-family:arial;font-size:10px;color:#ccc;background-color:#555}
a {color:#ccc;text-decoration:none;}
a:hover {color:#ccc;text-decoration:none}

#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

li.comments {background:url(yourimage.png) no-repeat 0 -32px;}
li.posts {background:url(yourimage.png) no-repeat 0 -32px;}
li.category {background:url(yourimage.png) no-repeat 0 -32px;}
li.famous {background:url(yourimage.png) no-repeat 0 -32px;}
li.random {background:url(yourimage.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(images/boxTop.png) no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(images/boxBottom.png) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(images/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}
</style>
</head>
<body>
<h2><a href="http://www.queness.com">jQuery Tabbed Side Menu from Queness WebBlog</a></h2>

<div class="box">
<ul id="tabMenu">
  <li class="posts selected"></li>
  <li class="comments"></li>
  <li class="category"></li>
  <li class="famous"></li>
  <li class="random"></li>
</ul>
<div class="boxTop"></div>

<div class="boxBody">
 
  <div id="posts" class="show">

    <ul>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li>Exclusive RSS Icons from Queness.</li>
      <li>50 Monochromatic Website Designs.</li>

      <li>Food Plates and Creative Dishware Designs.</li>
      <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
      <li class="last">New Smashing Freebies For Designers and Bloggers.</li>
    </ul> 
  </div> 
 
  <div id="comments">
    <ul>
      <li><a>jQuery Tabbed Navigation Menu. <span> - kevin</span></a></li>

      <li><a>You can add links in here! <span> - kevin</span></a></li>
      <li><a>It's easy to understand. Though it's not the best, but hell yeah it works. <span> - kevin</span></a></li>
      <li><a>I hope you will like it. <span> - kevin</span></a></li>
      <li><a>My next tutorial will be jQuery-based Accordion. <span> - kevin</span></a></li>

      <li class="last"><a>And, I'm working on a free wordpress template as well : ) <span> - kevin</span></a></li>
    </ul>
  </div>
 
  <div id="category">
    <ul>
      <li><a href="http://www.queness.com/tag/ajax">ajax</a></li>
      <li><a href="http://www.queness.com/tag/css-html">css-html</a></li>

      <li><a href="http://www.queness.com/tag/freebies">freebies</a></li>
      <li><a href="http://www.queness.com/tag/icon">icon</a></li>
      <li><a href="http://www.queness.com/tag/inspiration">inspiration</a></li>
      <li><a href="http://www.queness.com/tag/javascript">javascript</a></li>
      <li><a href="http://www.queness.com/tag/logo">logo</a></li>
      <li><a href="http://www.queness.com/tag/photography">photography</a></li>

      <li><a href="http://www.queness.com/tag/photoshop">photoshop</a></li>
      <li><a href="http://www.queness.com/tag/php">php</a></li>
      <li><a href="http://www.queness.com/tag/seo">seo</a></li>
      <li><a href="http://www.queness.com/tag/tutorial">tutorial</a></li>
      <li><a href="http://www.queness.com/tag/usability">usability</a></li>
      <li><a href="http://www.queness.com/tag/wallpaper">wallpaper</a></li>

      <li class="last"><a href="http://www.queness.com/tag/wordpress">wordpress</a></li>
    </ul> 
  </div>
 
  <div id="famous">
    <ul>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>

      <li class="last">Exclusive RSS Icons from Queness.</li>
    </ul> 
  </div>
 
  <div id="random">
    <ul>
      <li>50 Monochromatic Website Designs.</li>
      <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
      <li>Simple JQuery Modal Window Tutorial.</li>

      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Exclusive RSS Icons from Queness.</li>
      <li>New Smashing Freebies For Designers and Bloggers.</li>
      <li class="last">Food Plates and Creative Dishware Designs.</li>
    </ul>   
  </div>       


</div>

Hosted the file to my own host.
Also make sure to replace the sample images with your own .

14Jquery navigation help Empty Re: Jquery navigation help Sun Oct 03, 2010 8:56 pm

ankillien

ankillien
Administrator
Administrator
Cool-Processor wrote:heres the code:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tab Menu</title>

<script type="text/javascript" src="http://freshydesigns.webs.com/jquery/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {   


  //Get all the LI from the #tabMenu UL
  $('#tabMenu > li').click(function(){
   
    //perform the actions when it's not selected
    if (!$(this).hasClass('selected')) {   
         
    //remove the selected class from all LI   
    $('#tabMenu > li').removeClass('selected');
   
    //Reassign the LI
    $(this).addClass('selected');
   
    //Hide all the DIV in .boxBody
    $('.boxBody div').slideUp('1500');
   
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
   
  }
   
  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest   
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout'); 
   
  }).mouseout(function() {
   
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');   
   
  });

    //Mouseover with animate Effect for Category menu list
  $('.boxBody #category li').click(function(){

    //Get the Anchor tag href under the LI
    window.location = $(this).children().attr('href');
  }).mouseover(function() {

    //Change background color and animate the padding
    $(this).css('backgroundColor','#888');
    $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
   
    //Change background color and animate the padding
    $(this).css('backgroundColor','');
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  }); 
   
    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  $('#.boxBody li').click(function(){
    window.location = $(this).children().attr('href');
  }).mouseover(function() {
    $(this).css('backgroundColor','#888');
  }).mouseout(function() {
    $(this).css('backgroundColor','');
  });     
   
});

</script>
<style>
body{font-family:arial;font-size:10px;color:#ccc;background-color:#555}
a {color:#ccc;text-decoration:none;}
a:hover {color:#ccc;text-decoration:none}

#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

li.comments {background:url(yourimage.png) no-repeat 0 -32px;}
li.posts {background:url(yourimage.png) no-repeat 0 -32px;}
li.category {background:url(yourimage.png) no-repeat 0 -32px;}
li.famous {background:url(yourimage.png) no-repeat 0 -32px;}
li.random {background:url(yourimage.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(images/boxTop.png) no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(images/boxBottom.png) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(images/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}
</style>
</head>
<body>
<h2><a href="http://www.queness.com">jQuery Tabbed Side Menu from Queness WebBlog</a></h2>

<div class="box">
<ul id="tabMenu">
  <li class="posts selected"></li>
  <li class="comments"></li>
  <li class="category"></li>
  <li class="famous"></li>
  <li class="random"></li>
</ul>
<div class="boxTop"></div>

<div class="boxBody">
 
  <div id="posts" class="show">

    <ul>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li>Exclusive RSS Icons from Queness.</li>
      <li>50 Monochromatic Website Designs.</li>

      <li>Food Plates and Creative Dishware Designs.</li>
      <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
      <li class="last">New Smashing Freebies For Designers and Bloggers.</li>
    </ul> 
  </div> 
 
  <div id="comments">
    <ul>
      <li><a>jQuery Tabbed Navigation Menu. <span> - kevin</span></a></li>

      <li><a>You can add links in here! <span> - kevin</span></a></li>
      <li><a>It's easy to understand. Though it's not the best, but hell yeah it works. <span> - kevin</span></a></li>
      <li><a>I hope you will like it. <span> - kevin</span></a></li>
      <li><a>My next tutorial will be jQuery-based Accordion. <span> - kevin</span></a></li>

      <li class="last"><a>And, I'm working on a free wordpress template as well : ) <span> - kevin</span></a></li>
    </ul>
  </div>
 
  <div id="category">
    <ul>
      <li><a href="http://www.queness.com/tag/ajax">ajax</a></li>
      <li><a href="http://www.queness.com/tag/css-html">css-html</a></li>

      <li><a href="http://www.queness.com/tag/freebies">freebies</a></li>
      <li><a href="http://www.queness.com/tag/icon">icon</a></li>
      <li><a href="http://www.queness.com/tag/inspiration">inspiration</a></li>
      <li><a href="http://www.queness.com/tag/javascript">javascript</a></li>
      <li><a href="http://www.queness.com/tag/logo">logo</a></li>
      <li><a href="http://www.queness.com/tag/photography">photography</a></li>

      <li><a href="http://www.queness.com/tag/photoshop">photoshop</a></li>
      <li><a href="http://www.queness.com/tag/php">php</a></li>
      <li><a href="http://www.queness.com/tag/seo">seo</a></li>
      <li><a href="http://www.queness.com/tag/tutorial">tutorial</a></li>
      <li><a href="http://www.queness.com/tag/usability">usability</a></li>
      <li><a href="http://www.queness.com/tag/wallpaper">wallpaper</a></li>

      <li class="last"><a href="http://www.queness.com/tag/wordpress">wordpress</a></li>
    </ul> 
  </div>
 
  <div id="famous">
    <ul>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>

      <li class="last">Exclusive RSS Icons from Queness.</li>
    </ul> 
  </div>
 
  <div id="random">
    <ul>
      <li>50 Monochromatic Website Designs.</li>
      <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
      <li>Simple JQuery Modal Window Tutorial.</li>

      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Exclusive RSS Icons from Queness.</li>
      <li>New Smashing Freebies For Designers and Bloggers.</li>
      <li class="last">Food Plates and Creative Dishware Designs.</li>
    </ul>   
  </div>       


</div>

Hosted the file to my own host.
Also make sure to replace the sample images with your own .

Remove the html, head and title tags and it will be perfect Wink

15Jquery navigation help Empty Re: Jquery navigation help Sun Oct 03, 2010 9:13 pm

Emilio

Emilio
Registered Member
Registered Member
Sorry bu tit doesn't work

http://www.graphilicious.forumotion.Com

16Jquery navigation help Empty Re: Jquery navigation help Sun Oct 03, 2010 9:31 pm

ankillien

ankillien
Administrator
Administrator
Emilio wrote:Sorry bu tit doesn't work

What does it show up?

Can you give link to the site where you have put the codes?

17Jquery navigation help Empty Re: Jquery navigation help Sun Oct 03, 2010 10:58 pm

Emilio

Emilio
Registered Member
Registered Member
just click on website in my profile
as i said i want it in a portal widget

http://www.graphilicious.forumotion.Com

18Jquery navigation help Empty Re: Jquery navigation help Mon Oct 04, 2010 12:05 am

Guest


Guest
its working fine on me Neutral

19Jquery navigation help Empty Re: Jquery navigation help Mon Oct 04, 2010 12:11 am

Emilio

Emilio
Registered Member
Registered Member
can isee cp?

http://www.graphilicious.forumotion.Com

20Jquery navigation help Empty Re: Jquery navigation help Mon Oct 04, 2010 12:33 pm

ankillien

ankillien
Administrator
Administrator
I think I got the bug Razz

Try replacing the javascript code with this one...

Code:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() { 


  //Get all the LI from the #tabMenu UL
  jQuery('#tabMenu > li').click(function(){
 
    //perform the actions when it's not selected
    if (!jQuery(this).hasClass('selected')) { 
       
    //remove the selected class from all LI 
    jQuery('#tabMenu > li').removeClass('selected');
 
    //Reassign the LI
    jQuery(this).addClass('selected');
 
    //Hide all the DIV in .boxBody
    jQuery('.boxBody div').slideUp('1500');
 
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    jQuery('.boxBody div:eq(' + jQuery('#tabMenu > li').index(this) + ')').slideDown('1500');
 
  }
 
  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest 
    jQuery(this).addClass('mouseover');
    jQuery(this).removeClass('mouseout');
 
  }).mouseout(function() {
 
    //Add and remove class
    jQuery(this).addClass('mouseout');
    jQuery(this).removeClass('mouseover'); 
 
  });

    //Mouseover with animate Effect for Category menu list
  jQuery('.boxBody #category li').click(function(){

    //Get the Anchor tag href under the LI
    window.location = jQuery(this).children().attr('href');
  }).mouseover(function() {

    //Change background color and animate the padding
    jQuery(this).css('backgroundColor','#888');
    jQuery(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
 
    //Change background color and animate the padding
    jQuery(this).css('backgroundColor','');
    jQuery(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  });
 
    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  jQuery('#.boxBody li').click(function(){
    window.location = jQuery(this).children().attr('href');
  }).mouseover(function() {
    jQuery(this).css('backgroundColor','#888');
  }).mouseout(function() {
    jQuery(this).css('backgroundColor','');
  });   
 
});</script>

21Jquery navigation help Empty Re: Jquery navigation help Mon Oct 04, 2010 4:12 pm

Emilio

Emilio
Registered Member
Registered Member
Well still got problems with it , there is like a big glight grey border around it and i only see the pics when hovering over them

http://www.graphilicious.forumotion.Com

22Jquery navigation help Empty Re: Jquery navigation help Mon Oct 04, 2010 6:35 pm

ankillien

ankillien
Administrator
Administrator
The background color can be removed by adding this code to the CSS..

Code:
.box {
background: transparent;
}

About the other thins like rounded corners and icon appearing only when hovered, I think it is because you haven't uploaded the images and aded the URLs in the CSS codes.

You need to upload all the images that comes with the plug in and add the URLs in CSS to respective place wherever it says "url(...)".

23Jquery navigation help Empty Re: Jquery navigation help Fri Oct 08, 2010 2:02 am

Guest


Guest
Hello Emilio,

i tried to fix any bugs however there is something wrong with the images placement.I will give you the code but it still has 1 bug.I will fix it sometime Wink

Code:


<script type="text/javascript" src="http://freshydesigns.webs.com/jquery/jquery-1.3.1.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {


  //Get all the LI from the #tabMenu UL
  jQuery('#tabMenu > li').click(function(){
 
    //perform the actions when it's not selected
    if (!jQuery(this).hasClass('selected')) {
     
    //remove the selected class from all LI
    jQuery('#tabMenu > li').removeClass('selected');
 
    //Reassign the LI
    jQuery(this).addClass('selected');
 
    //Hide all the DIV in .boxBody
    jQuery('.boxBody div').slideUp('1500');
 
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    jQuery('.boxBody div:eq(' + jQuery('#tabMenu > li').index(this) + ')').slideDown('1500');
 
  }
 
  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
    jQuery(this).addClass('mouseover');
    jQuery(this).removeClass('mouseout');
 
  }).mouseout(function() {
 
    //Add and remove class
    jQuery(this).addClass('mouseout');
    jQuery(this).removeClass('mouseover');
 
  });

    //Mouseover with animate Effect for Category menu list
  jQuery('.boxBody #category li').click(function(){

    //Get the Anchor tag href under the LI
    window.location = jQuery(this).children().attr('href');
  }).mouseover(function() {

    //Change background color and animate the padding
    jQuery(this).css('backgroundColor','#888');
    jQuery(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
 
    //Change background color and animate the padding
    jQuery(this).css('backgroundColor','');
    jQuery(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  });
 
    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  jQuery('#.boxBody li').click(function(){
    window.location = jQuery(this).children().attr('href');
  }).mouseover(function() {
    jQuery(this).css('backgroundColor','#888');
  }).mouseout(function() {
    jQuery(this).css('backgroundColor','');
  }); 
 
});</script>
<style>
body{font-family:arial;font-size:10px;color:#ccc;}
a {color:#ccc;text-decoration:none;}
a:hover {color:#ccc;text-decoration:none}

#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

li.comments {background:url(http://cdn.iconfinder.net/data/icons/CrystalClear/48x48/mimetypes/mime_txt.png) no-repeat 0 -32px;}
li.posts {background:url(http://cdn.iconfinder.net/data/icons/CrystalClear/48x48/mimetypes/mime_txt.png) no-repeat 0 -32px;}
li.category {background:url(http://cdn.iconfinder.net/data/icons/CrystalClear/48x48/mimetypes/mime_txt.png) no-repeat 0 -32px;}
li.famous {background:url(http://cdn.iconfinder.net/data/icons/CrystalClear/48x48/mimetypes/mime_txt.png) no-repeat 0 -32px;}
li.random {background:url(http://cdn.iconfinder.net/data/icons/CrystalClear/48x48/mimetypes/mime_txt.png) no-repeat 0 -32px;}

li.comments:hover {background:url(http://cdn.iconfinder.net/data/icons/CrystalClear/48x48/mimetypes/mime_txt.png) no-repeat 0 -32px;}
li.posts:hover {background:url(http://cdn.iconfinder.net/data/icons/CrystalClear/48x48/mimetypes/mime_txt.png) no-repeat 0 -32px;}
li.category:hover {background:url(http://cdn.iconfinder.net/data/icons/mnml/down.png) no-repeat 0 -32px;}
li.famous:hover {background:url(http://cdn.iconfinder.net/data/icons/CrystalClear/48x48/mimetypes/mime_txt.png) no-repeat 0 -32px;}
li.random:hover {background:url(http://cdn.iconfinder.net/data/icons/CrystalClear/48x48/mimetypes/mime_txt.png) no-repeat 0 -32px;}



.box {width:227px}
.boxTop {background:url(images/boxTop.png) no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(images/boxBottom.png) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(images/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}
</style>
</head>
<div class="box">
<ul id="tabMenu">
  <li class="posts selected"></li>
  <li class="comments"></li>
  <li class="category"></li>
  <li class="famous"></li>
  <li class="random"></li>
</ul>
<div class="boxTop"></div>

<div class="boxBody">
 
  <div id="posts" class="show">

    <ul>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li>Exclusive RSS Icons from Queness.</li>
      <li>50 Monochromatic Website Designs.</li>

      <li>Food Plates and Creative Dishware Designs.</li>
      <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
      <li class="last">New Smashing Freebies For Designers and Bloggers.</li>
    </ul>
  </div>
 
  <div id="comments">
    <ul>
      <li><a>jQuery Tabbed Navigation Menu. <span> - kevin</span></a></li>

      <li><a>You can add links in here! <span> - kevin</span></a></li>
      <li><a>It's easy to understand. Though it's not the best, but hell yeah it works. <span> - kevin</span></a></li>
      <li><a>I hope you will like it. <span> - kevin</span></a></li>
      <li><a>My next tutorial will be jQuery-based Accordion. <span> - kevin</span></a></li>

      <li class="last"><a>And, I'm working on a free wordpress template as well : ) <span> - kevin</span></a></li>
    </ul>
  </div>
 
  <div id="category">
    <ul>
      <li><a href="http://www.queness.com/tag/ajax">ajax</a></li>
      <li><a href="http://www.queness.com/tag/css-html">css-html</a></li>

      <li><a href="http://www.queness.com/tag/freebies">freebies</a></li>
      <li><a href="http://www.queness.com/tag/icon">icon</a></li>
      <li><a href="http://www.queness.com/tag/inspiration">inspiration</a></li>
      <li><a href="http://www.queness.com/tag/javascript">javascript</a></li>
      <li><a href="http://www.queness.com/tag/logo">logo</a></li>
      <li><a href="http://www.queness.com/tag/photography">photography</a></li>

      <li><a href="http://www.queness.com/tag/photoshop">photoshop</a></li>
      <li><a href="http://www.queness.com/tag/php">php</a></li>
      <li><a href="http://www.queness.com/tag/seo">seo</a></li>
      <li><a href="http://www.queness.com/tag/tutorial">tutorial</a></li>
      <li><a href="http://www.queness.com/tag/usability">usability</a></li>
      <li><a href="http://www.queness.com/tag/wallpaper">wallpaper</a></li>

      <li class="last"><a href="http://www.queness.com/tag/wordpress">wordpress</a></li>
    </ul>
  </div>
 
  <div id="famous">
    <ul>
      <li>Simple JQuery Modal Window Tutorial.</li>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>

      <li class="last">Exclusive RSS Icons from Queness.</li>
    </ul>
  </div>
 
  <div id="random">
    <ul>
      <li>50 Monochromatic Website Designs.</li>
      <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
      <li>Simple JQuery Modal Window Tutorial.</li>

      <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
      <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
      <li>Exclusive RSS Icons from Queness.</li>
      <li>New Smashing Freebies For Designers and Bloggers.</li>
      <li class="last">Food Plates and Creative Dishware Designs.</li>
    </ul> 
  </div>     


</div>



Last edited by Nick on Fri Oct 08, 2010 5:53 pm; edited 1 time in total

24Jquery navigation help Empty Re: Jquery navigation help Fri Oct 08, 2010 9:23 am

ankillien

ankillien
Administrator
Administrator
Nick, remove the html and head tags from your code, they are unnecessary and can create errors.

25Jquery navigation help Empty Re: Jquery navigation help Fri Oct 08, 2010 5:52 pm

Guest


Guest
sorz,i thought it was for an html page Sad

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum