Click here to Skip to main content
13,056,135 members (53,089 online)

Welcome to the Lounge

   

For discussing anything related to a software developer's life. Technical discussions are encouraged, but click here to ask your programming questions.

The Lounge is rated PG. If you're about to post something you wouldn't want your kid sister to read then don't post it. No flame wars, no abusive conduct, no programming questions and please don't post ads.
 
GeneralCCC 4/6/14 Pin
Dalek Dave3-Jun-14 21:32
memberDalek Dave3-Jun-14 21:32 
GeneralRe: CCC 4/6/14 Pin
Motor Viper3-Jun-14 23:21
memberMotor Viper3-Jun-14 23:21 
GeneralDilbert OTD Pin
OriginalGriff3-Jun-14 20:25
protectorOriginalGriff3-Jun-14 20:25 
GeneralRe: Dilbert OTD Pin
glennPattonWork3-Jun-14 22:25
professionalglennPattonWork3-Jun-14 22:25 
GeneralVale Doc Neeson Pin
pwasser3-Jun-14 17:03
memberpwasser3-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
protectorPete 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
memberhilbiazhar3-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.

<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>


/*----------------------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;     
}

<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
memberRoger Wright3-Jun-14 19:42 
GeneralEmail from eBay Pin
Kevin Marois3-Jun-14 9:54
memberKevin Marois3-Jun-14 9:54 
GeneralRe: Email from eBay Pin
Kent Sharkey3-Jun-14 10:02
memberKent Sharkey3-Jun-14 10:02 
GeneralRe: Email from eBay Pin
RyanDev3-Jun-14 10:03
mvpRyanDev3-Jun-14 10:03 
GeneralRe: Email from eBay Pin
GrumbleDuke3-Jun-14 10:05
memberGrumbleDuke3-Jun-14 10:05 
GeneralRe: Email from eBay Pin
RyanDev3-Jun-14 10:21
mvpRyanDev3-Jun-14 10:21 
GeneralRe: Email from eBay Pin
Mike Hankey3-Jun-14 10:26
professionalMike Hankey3-Jun-14 10:26 
GeneralRe: Email from eBay Pin
OriginalGriff3-Jun-14 22:07
protectorOriginalGriff3-Jun-14 22:07 
GeneralRe: Email from eBay Pin
Motor Viper3-Jun-14 22:45
memberMotor 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
memberGovindaraj 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
pwasser3-Jun-14 14:13
memberpwasser3-Jun-14 14:13 
GeneralRe: Email from eBay Pin
Nueman3-Jun-14 11:31
memberNueman3-Jun-14 11:31 
GeneralRe: Email from eBay Pin
pwasser3-Jun-14 14:12
memberpwasser3-Jun-14 14:12 
GeneralRe: Email from eBay Pin
JimmyRopes3-Jun-14 18:24
memberJimmyRopes3-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.


Advertise | Privacy | Mobile
Web01 | 2.8.170728.2 | Last Updated 28 Jul 2017
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid