बदसूरत एएसपी से छुटकारा पाने के लिए कैसे: मेनू झिलमिलाहट?

मैं मेज से मुक्त प्रतिपादन मोड के साथ एक ASP.NET 4.0 वेबफ़ॉर्म पृष्ठ पर asp:Menu नियंत्रण उपयोग कर रहा हूँ:बदसूरत एएसपी से छुटकारा पाने के लिए कैसे: मेनू झिलमिलाहट?

<asp:Menu ID="MenuBase" runat="server" DataSourceID="SiteMapDataSourceMenu" 
    Orientation="Horizontal" CssClass="contentmenu" RenderingMode="List" 
    IncludeStyleBlock="false"> 
</asp:Menu>

मेनू 5 या 6 मेनू आइटम के साथ एक क्षैतिज मुख्य पंक्ति और उनमें से कुछ खुला कार्यक्षेत्र नहीं है पॉपअप मेनू जब उपयोगकर्ता उन पर hovers।

अक्सर जब कोई पोस्टबैक होता है और पृष्ठ को एक पल के लिए मेनू "झिलमिलाहट" फिर से प्रस्तुत किया जाता है (कहें, आधे सेकेंड) जिसका अर्थ है: पॉपअप मेनू में आइटम सहित सभी मेनू आइटम - एक में प्रदर्शित होते हैं या सामान्य उद्देश्य वाले राज्य में लौटने से पहले एक दूसरे के बाद एक और पंक्तियां।

सभी मेनू आइटम्स के "प्रकट" डिस्प्ले के इस संक्षिप्त पल में मेनू एएस दिखाता है यदि जावास्क्रिप्ट ब्राउज़र में अक्षम कर दिया गया था। (ऐसा लगता है कि पॉपअप मेनू को एएसपी में कुछ जावास्क्रिप्ट का उपयोग करके हासिल किया जाता है: मेनू नियंत्रण।)

यह व्यवहार काफी बदसूरत है, खासकर एक बड़े मेनू के साथ (2 या 3 पंक्तियों से कम समय के लिए प्रतिपादन) सामान्य पृष्ठ पर वापस कूदने से पहले पूरी पृष्ठ सामग्री को स्थानांतरित कर दिया जाता है।

क्या आप इस समस्या के लिए कोई समाधान जानते हैं?

अग्रिम धन्यवाद!

(टिप्पणी: मुझे यह उल्लेख करना चाहिए कि मैंने एएसपी.NET 4.0 में अपग्रेड करने से पहले कोडप्लेक्स से प्रसिद्ध सीएसएस-अनुकूल मेनू नियंत्रण का उपयोग किया था। मुझे लगता है कि मुझे सीएसएस-अनुकूल नियंत्रण की आवश्यकता नहीं है क्योंकि एएसपी : संस्करण 4 में मेनू अब एक अंतर्निहित सूची प्रतिपादन मोड प्रदान करता है। जहां तक मुझे याद है कि मेरे पास सीएसएस-अनुकूल नियंत्रण के साथ यह झटका नहीं है और मुझे लगता है कि यह नियंत्रण जावास्क्रिप्ट का उपयोग नहीं करता है। शायद यह एक बुरा था । कदम मैं, वापस सीएसएस के अनुकूल मेनू नियंत्रण के लिए जा रहा है, तो संभव के बिना एक समाधान के लिए अब देख रहा हूँ)

संपादित करें:।

यह अस्थिर ब्राउज़र independ है आईएन, हालांकि आईई 8 और 7 में सबसे ज्यादा ध्यान देने योग्य आईई 7 (या आईई 8 में संगतता मोड) में यह असाधारण बदसूरत है क्योंकि मेन्यू आइटम 5 या 6 पंक्तियों में भी पागल विकर्ण पैटर्न में प्रदर्शित होते हैं।

स्रोत

2010-07-13 Slauma

आप उल्लेख नहीं करते कि आप एक मास्टर पेज का उपयोग कर रहे हैं, हालांकि इस प्रश्न में कुछ जवाब मदद की जा सकती हैं (सुनिश्चित नहीं है कि आपने इसे पहले से देखा है)। http: // stackoverflow।कॉम/प्रश्न/888245/एएसपी-नेट-मेन्यू-कंट्रोल-रेंडर-गलत-जब-इस्तेमाल-पर-मास्टर-पेज –

लिंक के लिए धन्यवाद! इससे बहुत मदद मिली! मुझे यह सवाल नहीं मिला। हां, मैं मास्टर पेज का उपयोग कर रहा हूं और पहली नज़र में ऐसा लगता है कि मेन्यू को अपने कंटेंटप्लेसहोल्डर में संलग्न करने का समाधान काम कर रहा है। मुझे अंततः लाइव सर्वर पर इसका परीक्षण करना है, क्योंकि मेरी देव मशीन पर मुझे अक्सर यह झटका नहीं मिलता है। इंटरनेट पर सामान्य "लाइव विलंबता" वाले उत्पादन सर्वर पर यह अधिक ध्यान देने योग्य है। – Slauma

दुर्भाग्यवश यथार्थवादी विलंबता वाले लाइव सर्वर पर परीक्षण से पता चला कि मेनू को अपने स्वयं के ContentPlaceHolder में संलग्न करने का समाधान वास्तव में काम नहीं करता था। झिलमिलाहट अभी भी है (आईई 8 में परीक्षण (संगतता मोड के साथ और बिना) और फ़ायरफ़ॉक्स)। – Slauma

यदि किसी को अभी भी समाधान की आवश्यकता है; झिलमिलाहट वहां है क्योंकि आपको मेनू के लिए अपने सीएसएस में सही प्रदर्शन शैली सेट करनी चाहिए।

उदाहरण के लिए

कोशिश

#menu ul li ul 
{ 
    display: none; 
}

और

#menu ul li 
{ 
    position: relative; 
    float: left; 
    list-style: none; 
}

अस्थिर क्योंकि ASP.NET 4 मेनू जावास्क्रिप्ट का उपयोग करता है कुछ इनलाइन शैलियों स्थापित करने के लिए है।

स्रोत

2010-08-09 17:11:36 peter

हाँ! मुझे अभी भी एक समाधान की जरूरत है। लेकिन अब मेरे पास एक है, धन्यवाद! मैंने '#menu उल li उल' में केवल 'डिस्प्ले: none'' जोड़ा है और झिलमिलाहट गायब हो गई है। बस जल्दी से IE 7 के साथ लाइव सर्वर पर परीक्षण + 8, फ़ायरफ़ॉक्स, क्रोम और ओपेरा (वे सब इस मेनू अस्थिर से पता चला है) और इसे सुचारू रूप से अब काम कर रहा है। फिर से धन्यवाद, यह वास्तव में एक बड़ी मदद थी! – Slauma

इस मुद्दे पर यह एकदम सही समाधान। सामान्य लेकिन प्रभावी! – Stuart

फिर भी समस्या मेरे लिए होता है :( –

उपरोक्त समाधान निकट था, लेकिन मेरे लिए काम नहीं किया। वर्णित समस्या को ठीक करने के लिए इसे नीचे मामूली संशोधन की आवश्यकता है। जब मैं विजुअल स्टूडियो 2010 का उपयोग कर एक नया एएसपी.नेट वेब फॉर्म एप्लिकेशन प्रोजेक्ट बनाता हूं, तो डिफ़ॉल्ट रूप से मेनू के लिए जेनरेट किया गया सीएसएस ".menu" (सीएसएस क्लास) का उपयोग "#menu" (तत्व) के बजाय शैली को लागू करने के लिए करता है "मेनू" की आईडी के साथ)।

#menu -

काम नहीं करता।

.menu ul li ul 
{ 
    display: none; 
} 

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

स्रोत

2011-09-12 14:42:49 ClearCloud8

# (हैश) आईडी, जबकि द्वारा चयन करने के लिए प्रयोग किया जाता है। (डॉट) वर्ग द्वारा चयन करने के लिए प्रयोग किया जाता है। तो या तो संदर्भ – CodeClimber

एक ही मुद्दा मेरे साथ भी था: - मेनू काम

तो, दूसरे शब्दों में, यह आपके सीएसएस फ़ाइल में तल के पास डाल दिया है। लेकिन jquery कॉल को हटाकर हल किया गया। :) या आप ऑनलाइन से संदर्भित करने के बजाय .js स्क्रिप्ट फ़ाइल को स्क्रिप्ट फ़ोल्डर के अंदर डाउनलोड और रख सकते हैं।

स्रोत

2011-09-16 11:39:43

जब भी मुझे सीएसएस फ़ाइल और ऑनलोड ईवेंट के बीच पृष्ठ पर बहुत कुछ चल रहा था, तो मैंने यह समस्या भी उठाई जो संभावित रूप से मेनू आइटम को सजाने के लिए जावास्क्रिप्ट को ट्रिगर करता है। आईई 8 में विशेष रूप से स्टाइल को ठीक करने के लिए जावास्क्रिप्ट के लिए यह देरी बदसूरत थी।

पीटर और क्लीयरक्लाउड 8 के समाधान मेरे लिए लगभग अच्छे थे। मैं इस का उपयोग करें:

div.menu > ul > li 
{ 
    display: inline-block; 
    list-style: none; 
} 

div.menu ul li ul 
{ 
    display: none; 
}

मुख्य अंतर किया जा रहा है कि मैं प्रयोग किया जाता है "div.menu> ul> ली" जो "div.menu उल ली" जो उप afects के बजाय केवल वस्तुओं के सर्वोच्च पंक्ति लक्षित करता है, मेन्यू भी - परिणाम यह है कि सबमेनू आइटम एक ही चौड़ाई नहीं थे, इसलिए वे एक जंजीर सूची में गिराए गए।

(मैं, विजुअल स्टूडियो 2010 का उपयोग कर रहा .Net Framework 4)

स्रोत

2012-02-24 10:29:17 Etherman

के आधार पर किया जा सकता है मैं भी इस मुद्दे था मैं कहाँ मिल गया । दांतेदार मेनू ओह, idk क्यों इस पर नियंत्रण मुझे इतना मुसीबत देने के लिए है - में निर्मित कम नहीं – John

#menu ul li ul 
{ 
    display: none; 
} 

and 
#menu ul li 
{ 
    position: relative; 
    float: left; 
    list-style: none; 
}

यह मेरे लिए भी काम किया। जब तक मैंने फॉर्म पर रीकैप्चा नहीं रखा तब तक मुझे कोई समस्या नहीं थी। मेरा मेनू मास्टर पेज के भीतर भी बनाया जा रहा था। आपका बहुत बहुत धन्यवाद!

स्रोत

2012-03-18 01:41:10 James

(अपने VS 2010 परियोजना की शैलियाँ फ़ोल्डर में) Site.css फ़ाइल में ये पंक्तियां जोड़ें

/* Fix for extra space above menu in Chrome and Safari */ 
img[alt='Skip Navigation Links'] { 
display: none; 
}

एक वैकल्पिक जोड़ना है SkipLinkText = "" प्रत्येक मेनू आइटम के लिए (यह परीक्षण नहीं किया)

स्रोत

2012-08-10 21:55:13 Tanweer

"SkipLinkText =" जोड़ना मेनू टैग में लिए क्रोम मेनू ऊपर अतिरिक्त स्थान से छुटकारा पाने के लिए पूरी तरह से काम किया! –

यह स्पष्ट रूप से काम करता है (ऊपर दिए गए सुझाव) जब तक मैंने अभी तक अपने jQuery को 2.1.1 पर अपडेट नहीं किया है और सीडीएन (वाईएसएलओ द्वारा सुझाया गया) का उपयोग शुरू किया है। लेकिन अब वह झिलमिलाहट वापस है, पहले से भी बदतर है। कोई भी देखने के लिए जांच करता है यह एक बेहतर समाधान है? Thanx

मैं भी (सिर में)

<style type="text/css"> 
       div.menu ul li ul { display:none; } 
    </style>

स्रोत

2014-07-02 15:50:47 user2957885

आप शैली पत्रक कोड के नीचे कॉपी और site.master पृष्ठ के भीतर पेस्ट करें और यह सही चलाने के लिए और भी अपने मेनू शैली कोड को दूर ..

: इस समाधान लेकिन कोई भाग्य पाया

<style type="text/css"> 
    div.hideSkiplink 
    { 
     background-color: #3a4f63; 
     width: 100%; 
    } 
    div.menu ul li ul 
    { 
     display: none; 
    } 
    div.menu ul 
    { 
     float: left; 
     list-style: none; 
    } 
    div.menu li 
    { 
     list-style: none; 
     float:inherit; 
    } 
    div.menu 
    { 
     padding: 2px 0px 2px 0px; 
    } 
    div.menu ul 
    { 
     margin: 0px; 
     padding: 0px; 
     width: auto; 
    } 

    div.menu ul li a, div.menu ul li a:visited 
    { 
     background-color: #465c71; 
     border: 1px #4e667d solid; 
     color: #dde4ec; 
     display: block; 
     line-height: 1.35em; 
     padding: 4px 20px; 
     text-decoration: none; 
     white-space: nowrap; 
     position: relative; 
    } 

    div.menu ul li a:hover 
    { 
     background-color: #bfcbd6; 
     color: #465c71; 
     text-decoration: none; 
    } 

    div.menu ul li a:active 
    { 
     background-color: #465c71; 
     color: #cfdbe6; 
     text-decoration: none; 
    } 
</style>

स्रोत

2014-07-18 09:56:26 Jeetu

मैं कहा:

.menu ul li ul 
 
{ 
 
    display: none; 
 
} 
 

 
.menu ul li 
 
{ 
 
    position: relative; 
 
    /*float: left;*/ 
 
    list-style: none; 
 
}

सीसीएस फ़ाइल की कपास पर और जब मैंने एप्लिकेशन प्रकाशित किया तो झटकेदार प्रभाव को कम कर दिया गया। परिवर्तन से पहले, मेनू आइटम लगभग पूरे पृष्ठ को कवर करते हैं और आपके समाधान के बाद केवल 5 या 6 पंक्तियां !!!

यह मेरा गुरु पृष्ठ है:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SantaMaria.SiteMaster" %> 
 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
 
<head runat="server"> 
 
    <title></title> 
 
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> 
 
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> 
 
    </asp:ContentPlaceHolder> 
 
</head> 
 
<body> 
 

 
<script type="text/javascript" src="../Scripts/j_commons.js"></script> 
 

 
    <form runat="server"> 
 
    <div class="page"> 
 
     <div class="header"> 
 
      <div class="title"> 
 
       <h1> 
 
        <asp:Literal ID="CompanyName" runat="server"></asp:Literal> 
 
       </h1> 
 
      </div> 
 
      <div class="loginDisplay"> 
 
       <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> 
 
        <AnonymousTemplate> 
 
         [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ] 
 
        </AnonymousTemplate> 
 
        <LoggedInTemplate> 
 
         <%=Xsite.Override.getOverride("SiteMaster", "Welcome") %>  
 
         <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>! 
 
         [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Account/Login.aspx?ReturnUrl="/> ] 
 
        </LoggedInTemplate> 
 
       </asp:LoginView> 
 
      </div> 
 
      <div class="clear hideSkiplink"> 
 
       <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> 
 
       </asp:Menu> 
 
      </div> 
 
     </div> 
 
     <div class="main" style="height:800px"> 
 
      <asp:ContentPlaceHolder ID="MainContent" runat="server"/> 
 
     </div> 
 
     <div class="clear"> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> 
 
     
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

और इस सीसीएस एएसपी के लिए definitios फ़ाइल है: मेनू (नई लाइनों जो मैं सीसीएस फ़ाइल के botton पर पेस्ट के बिना):

div.hideSkiplink 
 
{ 
 
    background-color: /*#3a4f63;*/ #666666; 
 
    width: 100%; 
 
} 
 

 
div.menu 
 
{ 
 
    padding: 2px 0px 2px 4px; 
 
} 
 

 
div.menu ul 
 
{ 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: auto; 
 
    z-index: 10; /*Se estaba mostrando el submenu, mezclado con la pantalla de abajo!*/ 
 
} 
 

 
div.menu ul li a, div.menu ul li a:visited 
 
{ 
 
    background-color: #465c71; 
 
    border: 1px #4e667d solid; 
 
    color: #dde4ec; 
 
    display: block; 
 
    line-height: 1.35em; 
 
    padding: 4px 20px; 
 
    text-decoration: none; 
 
    white-space: nowrap; 
 
} 
 

 
div.menu ul li a:hover 
 
{ 
 
    background-color: #bfcbd6; 
 
    color: #465c71; 
 
    text-decoration: none; 
 
} 
 

 
div.menu ul li a:active 
 
{ 
 
    background-color: #465c71; 
 
    color: #cfdbe6; 
 
    text-decoration: none; 
 
}

मेनू आइटम एक XML फ़ाइल से लोड किए गए हैं।

वैसे मैं आपको अपने सभी उत्तरों के लिए धन्यवाद देना चाहता हूं "बदसूरत एएसपी से कैसे छुटकारा पाएं: मेनू झिलमिलाहट?" मैं एक पूर्ण समाधान खोजने के लिए जांच जारी रखूंगा। एक बार फिर धन्यवाद!!!

स्रोत

2014-11-03 01:37:35 Daniel

मुझे एएसपी.NET 4.5.1 का उपयोग करने के बाद भी एक ही समस्या थी और हालांकि मैंने ऊपर से सीएसएस स्टाइल टैग का उपयोग करने की कोशिश की, मैं झटके को रोकने में सक्षम नहीं था। हालांकि एचटीएमएल स्रोत को पुराने साइटों से नए में तुलना करके यह स्पष्ट था कि {display: none} टैग गुम था। मैं बस

<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">

इससे रूप में यह एक ही HTML स्रोत के रूप में पहले से उत्पादित हालांकि यह निश्चित रूप से एक अच्छा वैकल्पिक हल नहीं है साथ web.config अनुकूल अपने आप में मदद की।

स्रोत

2015-06-29 12:00:43 burton314

मैं सिफारिश समाधान है जो की कोशिश की है ..

div.menu ul li ul { display:none } 
 

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

.. और यह अस्थिर हल करने के लिए काम किया है, लेकिन एक और समस्या है जो दांतेदार मेनू आइटम है की शुरुआत की।

मेनू का डिफ़ॉल्ट प्रतिपादन अभिविन्यास लंबवत है और झिलमिलाहट केवल क्षैतिज मेनू के लिए होती है। फ्लोट: बाएं और स्थिति: एक आइटम में सभी वस्तुओं के साथ बाएं सेल स्थिति में मेनू आइटम को ध्वस्त करके सापेक्ष काम। यह पेज को चारों ओर कूदता है। फ्लोट: बाएं मेनू आइटम आकार को उस पाठ के लिए भी कम कर देता है जिसमें यह शामिल है (jagged मेनू समस्या)।

लंबवत मेनू के लिए ये फ़िक्स आवश्यक नहीं हैं।

समाधान है कि मेरे लिए काम करता

div.menu { height:24px } 
 

 
div.menu li { right:0; position:absolute; top:0 }

है यह एक ही परिणाम और स्थानों बाईं जहां मेनू प्रदान किया जाएगा, लेकिन नहीं द्वारा पर एक ही स्थान में सभी मेनू आइटम को प्राप्त होता है फ्लोट का उपयोग करके: छोड़ दिया गया यह मेनू आइटम को ऑटो की डिफ़ॉल्ट चौड़ाई के साथ छोड़ देता है। मेनू ऊंचाई मेनू क्षेत्र के लिए एक स्थिर स्थान प्रदान करती है और क्षैतिज स्थिर मेनू के लिए उपयोग की जाने वाली ऊंचाई पर आधारित होती है।

यह सेटिंग jagged मेनू का कारण नहीं बनती है।

स्रोत

2015-10-18 08:40:16

बदसूरत एएसपी से छुटकारा पाने के लिए कैसे: मेनू झिलमिलाहट?

उत्तर

संबंधित मुद्दे