यदि उल में उल बच्चा है तो तीर जोड़ने का कोई सीएसएस तरीका है?

Question

मेरे नेविगेशन संरचना इस तरह दिखता है:

<div class="menu"> 
    <ul> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page with Subpages</a> 
      <ul class="children"> 
       <li><a href="#">Page with another subpage</a> 
        <ul class="children"> 
         <li><a href="#">subsubpage</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Page 3</a></li> 
     <li><a href="#">Page 4</a></li> 
    </ul> 
</div> 

मैं सभी <li> की है कि एक subnavigation बच्चे हैं एक छोटे से नीचे-तीर लागू किया ताकि उपयोगकर्ताओं को पता यह पेज उपपृष्ठ है करना चाहते हैं।

क्या <li> में ul.children के बच्चे हैं, तो शुद्ध सीएसएस में पता लगाना संभव है? उपर्युक्त मेरे उदाहरण में, "उपपृष्ठों के साथ पृष्ठ" में नीचे तीर लागू होना चाहिए और "अन्य उपपृष्ठ वाला पृष्ठ" भी होना चाहिए।

$(function() { 
    $('.menu a').each(function() { 
     if ($(this).parent('li').children('ul').size() > 0) { 
      $(this).append('<span class="dwn">▼</span>'); 
     }   
    }); 
}); 

एक आसान शुद्ध सीएसएस तरीका ऐसा करने के लिए है:

अभी मैं इस समस्या को हल करने के लिए jQuery का उपयोग कर रहा हूँ?

धन्यवाद।

Answer 1

मुझे लगता है कि सर्वर पर उन li एस पर एक वर्ग (या आप जिस अवधि का उपयोग कर रहे हैं) को जोड़ने का सबसे अच्छा तरीका होगा।

एक और समाधान, लेकिन शायद आसान और साफ नहीं है, तीर को सभी ul एस में जोड़ना है और केवल ul.children में उन्हें दृश्य (सीएसएस का उपयोग करके) बनाना है। फिर आप पैरेंट ली के सामने या पीछे तीर को स्थानांतरित करने का प्रयास कर सकते हैं। चाहे यह काम करेगा, डिजाइन पर निर्भर करेगा।

Answer 2

आप ऐसा कर सकता है: an example

यह

ul.children:before { 
    content: "▼"; 
} 

यहाँ

है सभी ब्राउज़रों में समर्थन नहीं है, here is a list of support

संपादित

बस एहसास हुआ कि ऊपर मेरा उदाहरण दोषपूर्ण होगा, तीर गलत स्थिति में होगा। फिर भी - यदि यह एक एवेन्यू है तो आप तीर को सही तरीके से संरेखित करने की संभावना को आगे बढ़ाना चाहते हैं।

Answer 3

कोई सीएसएस 'पैरेंट चयनकर्ता' नहीं है।

$('.children').prev('li').append('<span class="dwn">▼</span>'); 

आपका प्रश्न यह एक के समान है::

Complex CSS selector for parent of active child

Answer 4

ऊर्ध्वाधर मेनू के लिए:

लेकिन यहाँ एक छोटा jQuery कोड है इस जे एस, सब = एनएवी पर काम करता है।ऊर्ध्वाधर ली

$("nav.vertical li:has(ul)").find("a:first").append('<img src="" alt="" class="">'); 

<nav> 
    <ul> 
    <li><a href="">Page</a> 
     <ul class="children"> 
      <li><a href="">Post</a></li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

Answer 5

यह सीएसएस में पूरी तरह से संभव है -

आपका संरचना यह है:

<ul class="menu"> 
     <li> 
      <a href="#">Has arrow</a> 
      <ul><li><a href="#"></a></li></ul> 
     </li> 
     <li> 
      <a href="#">Has no arrow</a> 
     </li> 
    </ul> 

आपका सीएसएस इस तरह होगा -

//this adds an arrow to every link 
    .menu li > a:after { content: '>'; } 

    // this removes the arrow when the link is the only child 
    .menu li > a:only-child:after { content: ''; } 

यह ले रहा है एक कदम आगे, यदि आप एक ड्रॉप डाउन मेनू चाहते हैं जहां शीर्ष स्तर की वस्तुओं पर एक नीचे तीर है और फिर मेरे लिए दायां तीर है http://jsfiddle.net/w9xnv/2/

Answer 6

उदाहरण

$(function() { 
$('.menu a').each(function() { 
    if ($(this).parent('li').children('ul').size() > 0) { 
     $(this).append('<span></span>'); 
    }   
    }); 
}); 

और सीएसएस के लिए

.menu li a span { 
display: -moz-inline-stack; 
display: inline-block; 
zoom: 1; 
*display: inline; 
vertical-align: middle; 
background: url(arrow.png) 0 0 no-repeat; 
width: 5px; 
height: 3px; 
margin-left: 5px; 

Answer 7

में - नुस, अपने सीएसएस इस

// set up the right arrows first 
    .menu li > a:after { content: '>'; } 

    //set up the downward arrow for top level items 
    .menu > li > a:after {content: 'v'; } 

    //clear the content if a is only child 
    .menu li > a:only-child:after {content: ''; } 

यहाँ दिखाई देगी कार्रवाई में इसके बारे में एक jsfiddle है इसे सरल रखने के हित, यहां वह समाधान है जिसका मैं उपयोग करना चाहता हूं:

1. ड्रॉप-डाउन मेनू के रूप में कार्य करने वाले आइटम के नाम के आस-पास टैग टैग करें।

   <div class="menu"> 
       <ul> 
        <li><a href="#"><span>Page with Subpages</span></a> 
         <ul class="children"> 
          <li><a href="#"><span>Page with another subpage</span></a> 
           <ul class="children"> 
            <li><a href="#">subsubpage</a></li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
   </div> 
   

2. सीएसएस का उपयोग कर तीर जोड़ें:

   #menu span:after /* DropDown Arrow */ 
   { 
       border: 0.313em solid transparent; /* 5 pixels wide */ 
       border-bottom: none; /* helps the drop-down arrow stay in the vertical centre of the parent */ 
       border-top-color: #cfcfcf; /* colour of the drop-down arrow */ 
       content: ''; /* content of the arrow, you want to keep this empty */ 
       vertical-align: middle; 
       display: inline-block; 
       position: relative; 
       right: -0.313em; /* 5 pixels right of the menu text*/ 
   } 
   

आशा यह आपके लिए काम करता है! मेरा मानना ​​है कि यह सबसे सरल तरीका है जो मैंने पार किया है!

Answer 8

भविष्य के पाठकों के लिए! मैं भी सोच रहा था और उसके बाद पर यह पता लगा अपने ही

हम जांच कर सकते हैं नहीं करता है, तो तत्व बच्चे हैं, लेकिन हम देख सकते हैं कि यह खाली

li:not(:emtpy):after { 
    content: "V"; 
    color: black; 
    position: relative; 
    left: 120%; 
    /* Well those styles are not best but you get the idea */ 
} 

Answer 9

पुराना सवाल है, लेकिन यह मैं कैसे करना होता है यह:

.menu li > a:not(:only-child):after { content: '▼'; } 

तुम भी इसे इस तरह अच्छे देख सकते हैं:

.menu li > a:not(:only-child):after { 
    content: '\00a0\00a0▼'; /* add a little spacing so it's not right next to the text */ 
    font-size: 0.8rem; /* adjust font size so it looks better */ 
    vertical-align: middle; /* vertical align to middle */ 
} 

Answer 10

यह सिर्फ 012 का शोधन होता हैएस उत्तर। CSS Tricks

#cssmenu li > a:not(:only-child)::after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid #fff; 
    float: right; 
}