What is the right way to avoid overlapping menus?

Question

0.00/5 (No votes)

See more:

Hi:I created an accordion menu in Layout.cshtml but when I go to another view and another menu is called up the menus are cluttered.(with this link from _layout.cshtml:

<li><a href="http://localhost:6365/custem/Index">spesification</a></li>

)

When the program is run, the Layout view menu works properly, but when the index menu is run, the menus are cluttered.

I also do not know how to put the _Layout.cshtml menu on the right page
ـLayout.cshtml:

<!DOCTYPE html>



<html lang="en">

<head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="css/accordionmenu.css" type="text/css" media="screen" />

    <style type="text/css">
        body {

            background: url(img/bg.png) repeat;
            width: 960px;
            margin: 0 auto;
        }

        .footer {
            margin-top: 50px;
            text-align: center;
            color: #666;
            font: bold 14px Arial;
        }

            .footer a {
                color: #999;
                text-decoration: none;
            }

        #wrapper-250 {
            width: 250px;
            margin: 0 auto;
        }
    </style>
    <meta name="robots" content="noindex,follow" />
</head>

<body>

   

    <div id="wrapper-250">

        <ul class="accordion">

            <li id="one" class="files">

                <a href="#one">customer</a>

                <ul class="sub-menu">

                    <li><a href="http://localhost:6365/custem/Index">spesification</a></li>

                    <li><a href="#">گزارشات</a></li>

                   

                </ul>

            </li>

            <li id="two" class="mail">

                <a href="#two">نت</a>

                <ul class="sub-menu">

                    <li><a href="#"> </a></li>

                    <li><a href="#"> </a></li>

                </ul>

            </li>

            <li id="three" class="cloud">

                <a href="#three">برنامه ریزی</a>

                <ul class="sub-menu">

                    <li><a href="#"></a></li>

                    <li><a href="#"></a></li>

                    

                </ul>

            </li>

            

        </ul>

    </div>

   


    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            // Store variables

            var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

            // Open the first tab on load

          //  accordion_head.first().addClass('active').next().slideDown('normal');

            // Click function

            accordion_head.on('click', function (event) {

                // Disable header links

                event.preventDefault();

                // Show and hide the tabs on click

                if ($(this).attr('class') != 'active') {
                    accordion_body.slideUp('normal');
                    $(this).next().stop(true, true).slideToggle('normal');
                    accordion_head.removeClass('active');
                    $(this).addClass('active');
                }

            });

        });

    </script>
    <div class="container body-content">
        @RenderBody()
    </div>
</body>

</html>

----------------css for _Layout.cshtml-----------

.accordion,
.accordion ul,
.accordion li,
.accordion a,

.accordion span {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
   
   
}

.accordion li {
	list-style: none;
 
}

/* Layout & Style */

.accordion li > a {
	display:inline-block;
	position: relative;
	min-width: 110px;
	padding: 0 10px 0 40px;
	height: 32px;
   
    
	color: #fdfdfd;
	font: bold 12px/32px Arial, sans-serif;
	text-decoration: none;
	text-shadow: 0px 1px 0px rgba(0,0,0, .35);

	background: #6c6e74;
	background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
	background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}


.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
	color: #3e5706;
	text-shadow: 1px 1px 1px rgba(255,255,255, .2);
	
	/*background: url(../img/active.png) repeat-x;*/
	background: #a5cd4e;
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);	
}

.accordion li > a span {
	display: block;
	position: absolute;
	top: 7px;
	right: 0;
	padding: 0 10px;
	margin-right: 10px;
	
	font: normal bold 12px/18px Arial, sans-serif;
	background: #404247;
	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
	box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}

.accordion > li:hover > a span,
.accordion > li:target > a span,
.accordion > li > a.active span {
	color: #fdfdfd;
	text-shadow: 0px 1px 0px rgba(0,0,0, .35);
	background: #3e5706;
}

/* Images */

.accordion > li > a:before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 24px;
	height: 24px;
	margin: 4px 8px;
   
	background-repeat: no-repeat;
	background-image: url(../img/icons.png);
	background-position: 0px 0px;
}

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before,
.accordion li.mail > a.active:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before,
.accordion li.cloud > a.active:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before,
.accordion li.sign > a.active:before { background-position: -72px -24px; }

/* Sub Menu */

.sub-menu li a {
	color: #797979;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);

	background: #e5e5e5;
	border-bottom: 1px solid #c9c9c9;

	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {
	color: #797979;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: transparent;
	border: 1px solid #c9c9c9;

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.sub-menu em {
	position: absolute;
    margin-right:0;
	top: 0;
	right: 0;
	
	color: #a6a6a6;
	font: normal 10px/32px Arial, sans-serif;
}

/* Functionality */

.accordion li > .sub-menu {
	display:none;
   
}

.accordion li:target > .sub-menu {
    display: none;
    
}

---------Index.cshtml-----

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .topnav {
            overflow: hidden;
            background-color: #333;
        }

            .topnav a {
                float: left;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

                .topnav a:hover {
                    background-color: #ddd;
                    color: black;
                }

                .topnav a.active {
                    background-color: #04AA6D;
                    color: white;
                }
    </style>
</head>
<body>

    <div class="topnav">
        <a class="active" href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
    </div>

    <div style="padding-left:16px">
        <h2>Top Navigation Example</h2>
        <p>Some content..</p>
    </div>

</body>
</html>

What I have tried:

maybe,i can not place the menu in the top of index.cshtml so as not to interfere with the _Layou menu.

Posted 14-Dec-21 9:19am

Mohamad Hossiny

Add a Solution

Comments

Richard Deeming 15-Dec-21 7:17am

Your index view doesn't use your shared layout, so none of your CSS is included.

Mohamad Hossiny 15-Dec-21 14:40pm

Thanks Richard. I was able to fix the index menu at the top of the view but the layout view menu is still messed up. I also used @{Layout = "~/Views/Shared/_Layout.cshtml";} in the index view but the problem was not resolved.
Summary: First, the Layout view menu is correct, after clicking on the link, the index view menu is correct and the layout menu is cluttered.please guide me.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)