Search the Community

Going to be a bit of code in this one. Basically I have a one page site that I'm using jQuery to navigate the page to make it appear as more than one page. Here is that particular code. $(document).ready(function() { var offset = $("#tab-menu").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#tab-menu").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#tab-menu").stop().animate({ marginTop: 0 }); }; }); }); $(function() { //Get all the LI from the #tabMenu UL $('#tab-menu > li').click(function(){ $('#tab-menu > li').removeClass('selected'); $(this).addClass('selected'); $('.tab-content div.tab').slideUp('slow'); $('.tab-content div.tab:eq(' + $('#tab-menu > li').index(this) + ')').slideDown('slow'); }).mouseover(function() { $(this).addClass('mouseover'); $(this).removeClass('mouseout'); }).mouseout(function() { $(this).addClass('mouseout'); $(this).removeClass('mouseover'); }); }); You will also notice I'm keeping that side menu close to the top of the page if you scroll down. This is all well and good. But I need to make this site responsive and the way I do that typically is to create a select menu as follows. $(function() { $("<select />").appendTo("#tab-menu"); $("<option />", { "selected": "selected", "value" : "", "text" : "Go to..." }).appendTo("#tab-menu select"); $("#tab-menu a").each(function() { var el = $(this); $("<option />", { "value" : el.attr("href"), "text" : el.text() }).appendTo("#tab-menu select"); }); $("#tab-menu select").change(function() { window.location = $(this).find("option:selected").val(); }); }); Now my problem runs into that last part there where it's wanting to change window location. So I have removed that part and put in the follow which doesn't seem to work. $(document).ready(function() { $('#tab-menu select').change(function(){ $('.tab-content div.tab').slideUp('slow'); $('.tab-content div.tab:eq(' + $("#tab-menu select").index("option:selected").val() + ')').slideDown('slow'); }).mouseover(function() { $(this).addClass('mouseover'); $(this).removeClass('mouseout'); }).mouseout(function() { $(this).addClass('mouseout'); $(this).removeClass('mouseover'); }); }); Can anyone help me figure out how to make the select menu function properly to go to the tab I'm wanting it to go to just as my <li> elements work when it's full size? If not I'm going to scrap the jQuery and just navigate to different pages because that is easy. Thanks!