Click here to Skip to main content
15,949,686 members

Welcome to the Lounge

   

For discussing anything related to a software developer's life but is not for programming questions. Got a programming question?

The Lounge is rated Safe For Work. If you're about to post something inappropriate for a shared office environment, then don't post it. No ads, no abuse, and no programming questions. Trolling, (political, climate, religious or whatever) will result in your account being removed.

 
GeneralCCC 4/6/14 Pin
Dalek Dave3-Jun-14 21:32
professionalDalek Dave3-Jun-14 21:32 
GeneralRe: CCC 4/6/14 Pin
Motor Viper3-Jun-14 23:21
professionalMotor Viper3-Jun-14 23:21 
GeneralDilbert OTD Pin
OriginalGriff3-Jun-14 20:25
mveOriginalGriff3-Jun-14 20:25 
GeneralRe: Dilbert OTD Pin
glennPattonWork33-Jun-14 22:25
professionalglennPattonWork33-Jun-14 22:25 
GeneralVale Doc Neeson Pin
User 592413-Jun-14 17:03
User 592413-Jun-14 17:03 
GeneralRe: Vale Doc Neeson Pin
_Damian S_3-Jun-14 17:14
professional_Damian S_3-Jun-14 17:14 
GeneralRe: Vale Doc Neeson Pin
Pete O'Hanlon3-Jun-14 20:11
mvePete O'Hanlon3-Jun-14 20:11 
Questionhighlight main menu item of current page. Also highlight when sub menu item is selected through javascript in ASP.net Pin
hilbiazhar3-Jun-14 11:24
hilbiazhar3-Jun-14 11:24 
Hi. I have a master page at the back from which i have created a web from. The menu which i have to deal is in the masterpage.
I am using multiple javascript files to style my menu. As far as the .sooper.js file and its functionality it is all good and the hover works the way i want. But when for higlighting the main menu item when sub menu item is selected, I add the jquery-2.1.0.js file and its related fuctionality things go wrong.
Neither the former Javascript files work and nor the later javscript file works. Can't figure it out
Looking for a solution.
My code will follow.

JavaScript
<head runat="server">
    <title></title>
    <link href="../Styles/AdminStyle.css" rel="stylesheet" type="text/css" />
    
   <script src="../Scripts/modernizr-1.5.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.kwicks-1.5.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.easing-sooper.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.sooperfish.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('ul.sf-menu').sooperfish();
        });
    </script> 
    <script src="../Scripts/jquery-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#nav').find('li a').click(function () {
                $('#nav').find('li a').removeClass('active');
                $(this).addClass('active');
                $($(this).closest('li.menu-item').children()[0]).addClass('active');
            });
        });

    </script>
</head>


CSS
/*----------------------Menu Width-------------------------- */
html body ul.sf-menu ul, html body ul.sf-menu ul li
{
    width: 222px;
}

html body ul.sf-menu ul ul
{
    margin: 0 0 0 220px;
}

/* Framework for proper showing/hiding/positioning */
ul.sf-menu, ul.sf-menu *
{
    margin: 0;
    padding: 0;
}

ul.sf-menu
{
    display: block;
    position: relative;
}

ul.sf-menu li
{
    display: block;
    list-style: none;
    float: left;
    position: relative;
}

ul.sf-menu li:hover
{
    visibility: inherit; /* fixes IE7 'sticky bug' */
}

ul.sf-menu a
{
    display: block;
    position: relative;
}

ul.sf-menu ul
{
    position: absolute;
    left: 0;
    width: 150px;
    top: auto;
    left: -999999px;
}

ul.sf-menu ul a
{
    zoom: 1; /* IE6/7 fix */
}

ul.sf-menu ul li
{
    float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
    width: 150px;
}

ul.sf-menu ul ul
{
    top: 0;
    margin: 0 0 0 150px;
}

ul.sf-menu li:hover ul, ul.sf-menu li:focus ul, ul.sf-menu li.sf-hover ul, ul.sf-menu ul li:hover ul, ul.sf-menu ul li:focus ul, ul.sf-menu ul li.sf-hover ul, ul.sf-menu ul ul li:hover ul, ul.sf-menu ul ul li:focus ul, ul.sf-menu ul ul li.sf-hover ul, ul.sf-menu ul ul ul li:hover ul, ul.sf-menu ul ul ul li:focus ul, ul.sf-menu ul ul ul li.sf-hover ul
{
    left: auto;
}

ul.sf-menu li:hover ul ul, ul.sf-menu li:focus ul ul, ul.sf-menu li.sf-hover ul ul, ul.sf-menu ul li:hover ul ul, ul.sf-menu ul li:focus ul ul, ul.sf-menu ul li.sf-hover ul ul, ul.sf-menu ul ul li:hover ul ul, ul.sf-menu ul ul li:focus ul ul, ul.sf-menu ul ul li.sf-hover ul ul, ul.sf-menu ul ul ul li:hover ul ul, ul.sf-menu ul ul ul li:focus ul ul, ul.sf-menu ul ul ul li.sf-hover ul ul
{
    left: -999999px;
}

/*--------AutoArrows CSS----------*/
span.sf-arrow
{
    width: 7px;
    height: 7px;
    position: absolute;
    top: 20px;
    right: 5px;
    display: block;
    background: url(../images/arrows-black.png) no-repeat 0 0;
    overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
    font-size: 1px;
}

ul ul span.sf-arrow
{
    right: 5px;
    top: 20px;
    background-position: 0 100%;
}

/*------------Theming the menu---------------*/
ul#nav
{
    float: left;
    
}

ul#nav ul
{
    background: #1f478d;
    margin-top: 4px;
    padding-bottom: 15px;
}

ul#nav li a
{
    padding: 11px 25px 6px 25px;
    font: 18px arial, sans-serif;
    text-decoration: none;
    color: Black;
    margin-right: 2px;
    
}

ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus
{
    color: White;
    text-shadow: none;
}

ul#nav ul li a
{
    color: black;
}

ul#nav ul li a:hover
{
    color: White;
    margin-right: 2px;
}
/*-----------------------------Still Hover when on Sub Menu---------------------------*/

ul#nav > li:hover > a
{
    color: White;
}

ul#nav ul > li:hover > a
{
    color: White;
}

/*---------------------------------CSS ends-----------------------*/

/*----------------------for the Later javascript file......*/
#nav li a.active 
{
     color:White;     
}

HTML
<nav>
        <ul class="sf-menu" id="nav">
          <li class="menu-item"><a href="AdminHome.aspx" id="adminhomenav">Home</a></li>
          <li class="menu-item"><a href="AdminAccount.aspx" id="adminaccountnav">Account</a></li>
           <li class="menu-item"><a href="#">Add</a>
				<ul>
					  <li><a href="#">Member</a>
					  <ul>
					  <li><a href="AddDepartment.aspx">Department</a></li>
					  <li><a href="AddEmployee.aspx">Employee</a></li>
					  <li><a href="AddStudent.aspx">Student</a></li>
			          </ul>
					  </li>
					  
					  <li><a href="#">Book</a>
					  <ul>
					  <li><a href="AddCategory.aspx">Category</a></li>
					  <li><a href="AddSubBook.aspx">Subject Book</a></li>
					  <li><a href="AddJournal.aspx">Journal</a></li>
					  <li><a href="AddThesisReport.aspx">Thesis/Report</a></li>
			          </ul>
					  </li>
			    </ul>
          </li>
          <li class="menu-item"><a href="#">Search</a>
            <ul>
              <li><a href="#">Member</a>
			          <ul>
					  <li><a href="AdminSearchEmployee.aspx">Employee</a></li>
					  <li><a href="AdminSearchStudent.aspx">Student</a></li>
			          </ul>
			  </li>
              <li><a href="#">Book</a>
			           <ul>
			          <li><a href="AdminSearchSubBook.aspx">Subject Book</a></li>
					  <li><a href="AdminSearchJournal.aspx">Journal</a></li>
					  <li><a href="AdminSearchThesisReport.aspx">Thesis/Report</a></li>
			          </ul>
			  </li>
			</ul>
          </li>
		  <li class="menu-item"><a href="AdminReturnBook.aspx" id="adminreturnbooknav">Return</a></li>
		  <li class="menu-item"><a href="#">More</a>
            <ul>
              
              <li><a href="AdminIssuedBooksReport.aspx">Issued Books-Report</a></li>
			  <li><a href="#">Late Fee</a>
			    <ul>
			          <li><a href="AdminLateFeeReport.aspx">Fee-Report</a></li>
					  <li><a href="AdminStudentWiseReport.aspx">View Student Wise</a></li>
                      <li><a href="AdminClearLateFee.aspx">Clear Fee</a></li>
			          </ul>
			  </li>
			</ul>
          </li>
        </ul>
      </nav>

AnswerRe: highlight main menu item of current page. Also highlight when sub menu item is selected through javascript in ASP.net Pin
Ravi Bhavnani3-Jun-14 11:38
professionalRavi Bhavnani3-Jun-14 11:38 
GeneralRe: highlight main menu item of current page. Also highlight when sub menu item is selected through javascript in ASP.net Pin
Roger Wright3-Jun-14 19:42
professionalRoger Wright3-Jun-14 19:42 
GeneralEmail from eBay Pin
Kevin Marois3-Jun-14 9:54
professionalKevin Marois3-Jun-14 9:54 
GeneralRe: Email from eBay Pin
Kent Sharkey3-Jun-14 10:02
staffKent Sharkey3-Jun-14 10:02 
GeneralRe: Email from eBay Pin
ZurdoDev3-Jun-14 10:03
professionalZurdoDev3-Jun-14 10:03 
GeneralRe: Email from eBay Pin
GrumbleDuke3-Jun-14 10:05
professionalGrumbleDuke3-Jun-14 10:05 
GeneralRe: Email from eBay Pin
ZurdoDev3-Jun-14 10:21
professionalZurdoDev3-Jun-14 10:21 
GeneralRe: Email from eBay Pin
Mike Hankey3-Jun-14 10:26
mveMike Hankey3-Jun-14 10:26 
GeneralRe: Email from eBay Pin
OriginalGriff3-Jun-14 22:07
mveOriginalGriff3-Jun-14 22:07 
GeneralRe: Email from eBay Pin
Motor Viper3-Jun-14 22:45
professionalMotor Viper3-Jun-14 22:45 
JokeRe: Email from eBay Pin
Karen Mitchelle3-Jun-14 23:23
professionalKaren Mitchelle3-Jun-14 23:23 
GeneralRe: Email from eBay Pin
Govindaraj Rangaraj3-Jun-14 10:28
Govindaraj Rangaraj3-Jun-14 10:28 
GeneralRe: Email from eBay Pin
Ravi Bhavnani3-Jun-14 11:10
professionalRavi Bhavnani3-Jun-14 11:10 
GeneralRe: Email from eBay Pin
User 592413-Jun-14 14:13
User 592413-Jun-14 14:13 
GeneralRe: Email from eBay Pin
Nueman3-Jun-14 11:31
Nueman3-Jun-14 11:31 
GeneralRe: Email from eBay Pin
User 592413-Jun-14 14:12
User 592413-Jun-14 14:12 
GeneralRe: Email from eBay Pin
JimmyRopes3-Jun-14 18:24
professionalJimmyRopes3-Jun-14 18:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.