ต่อไป »

[nalumi77]

เราไปเอา code เมนูจาก link นี้มาคะ

http://bootsnipp.com/snippets/...red/responsive-navigation-menu


แต่อยากจะตั้งให้เมนู UI Elements โชว์ sub menu เลย โดยไม่ต้องคลิ้กเข้าไป ต้องเขียน code ยังไงคะ

หนูทำให้มันเด้งแบบดูได้ทีละเมนูย่อยโดยใส่

<script type="text/javascript">
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 2500
    })
  });
</script>

ไปคะ แต่ถ้าจะให้มันโชว์ sub เมนูไว้เลย ต้องทำยังไงคะ

[ten1312]

พอ hover เมนูหลัก ก็ให้มัน fadein เมนูย่อยออกมาก็ได้

[nalumi77]

พอ hover เมนูหลัก ก็ให้มัน fadein เมนูย่อยออกมาก็ได้

เขียน script ยังไงคะ รบกวนนิดนึงคะ เราเขียน script ไม่เป็น (อาศัยถามเอา)

ขอบคุณคะ

[ten1312]

ผมเล่นในมือถือ พิมพ์โค้ดยาก
เดี๋ยวกลับบ้านจะเขียนให้
ไม่งั้นก็ลองหาโค้ดใน stackoverflow ดู มีเยอะเลยครับ

[nalumi77]

ผมเล่นในมือถือ พิมพ์โค้ดยาก
เดี๋ยวกลับบ้านจะเขียนให้
ไม่งั้นก็ลองหาโค้ดใน stackoverflow ดู มีเยอะเลยครับ

เดี๋ยวลองเข้าไปหาดูนะคะ แต่รอนะคะ555 

[ten1312]

เอา <div id="menu-ui"> ครอบเมนู UI element ทั้งหมด แล้วใส่ jquery ตามนี้ครับ

โค๊ด:

<script type="text/javascript">
  $(document).ready(function() {
    $('#menu-ui').hover(function()  {
       $('.sub-menu').stop(true, true).delay(300).slideDown("slow"); 
    }, function() {
        $('.sub-menu').stop(true, true).delay(300).slideUp("slow"); 
    });
    
  }); 
</script>

[nalumi77]

        <div class="menu-list">
            <ul id="menu-content" class="menu-content collapse out">
           
            <!-- Fluke Calibration Product -->
                <li data-toggle="collapse" data-target="#fluke-calibration" class="collapsed">
                <img src="assets/images/logo-fluke-calibration-group.jpg" />
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> ADDITEL <span class="arrow"></span></a>-->
                </li> 
                <ul class="sub-menu collapse" id="fluke-calibration">
                    <li><a href="#">Calibration Software</a></li>
                    <li><a href="#">Data Acquisition and Test Equipment</a></li>
                    <li><a href="#">Electrical Calibration</a></li>
                    <li><a href="#">Flow Calibration</a></li>
                    <li><a href="#">Pressure Calibration</a></li>
                    <li><a href="#">Process Calibration Tools</a></li>
                    <li><a href="#">RF Calibration</a></li>
                    <li><a href="#">Temperature Calibration</a></li>
                </ul>
               
            <!-- Fluke Industrial Product -->
                <li data-toggle="collapse" data-target="#fluke-industrial" class="collapsed">
                <img src="assets/images/logo-fluke-industrial-group.jpg" />
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> ADDITEL <span class="arrow"></span></a>-->
                </li> 
                <ul class="sub-menu collapse" id="fluke-industrial">
                    <li><a href="#">Fluke Calibration Group</a></li>
                    <li><a href="#">Battery Analyzers</a></li>
                    <li><a href="#">Clamp Meters</a></li>
                    <li><a href="#">Digital Multimeters</a></li>
                    <li><a href="#">Earth Ground Testers</a></li>
                    <li><a href="#">Electrical Testers</a></li>
                    <li><a href="#">HVAC/IAQ Tools</a></li>
                    <li><a href="#">Infrared Camera</a></li>
                    <li><a href="#">Installation Testers</a></li>
                    <li><a href="#">Insulation Testers</a></li>
                    <li><a href="#">Intrinsically Safe</a></li>
                    <li><a href="#">IR Windows</a></li>
                    <li><a href="#">Laser Distance Meters</a></li>
                    <li><a href="#">Portable Appliance Tester</a></li>
                    <li><a href="#">Portable Oscilloscopes</a></li>
                    <li><a href="#">Power Quality Tools</a></li>
                    <li><a href="#">Process Calibration Tools</a></li>
                    <li><a href="#">Radiation Safety</a></li>
                    <li><a href="#">Temperature-IR/Contact/IR Visual</a></li>
                    <li><a href="#">Vibration and Alignment</a></li>
                </ul>

         
            <!-- Ctrl Product -->
                <li data-toggle="collapse" data-target="#ctrl" class="collapsed">
                <img src="assets/images/logo-ctrl.jpg"/>
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> ROTRONIC <span class="arrow"></span></a>-->
                </li> 
                <ul class="sub-menu collapse" id="ctrl">
                    <li><a href="#">Ultrasond Detector</a></li>
                    <li><a href="#">Software</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul>

            </ul>
       </div>


<script type="text/javascript">
  $(document).ready(function() {
    $('#fluke-calibration').hover(function()  {
       $('.sub-menu').stop(true, true).delay(300).slideDown("slow");
    }, function() {
        $('.sub-menu').stop(true, true).delay(300).slideUp("slow");
    });
   
  });
</script>

ทำแล้วไม่ได้ผลคะพี่

[ten1312]

ตามนี้ครับ

โค๊ด:

 <div class="menu-list">
            <ul id="menu-content" class="menu-content collapse out">
            
            <!-- Fluke Calibration Product --> 
             <div id="menu-calibration">
                <li data-toggle="collapse" data-target="#fluke-calibration" class="collapsed">
                <img src="assets/images/logo-fluke-calibration-group.jpg" />
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> ADDITEL <span class="arrow"></span></a>-->
                </li>  
                <ul class="sub-menu collapse" id="fluke-calibration">
                    <li><a href="#">Calibration Software</a></li>
                    <li><a href="#">Data Acquisition and Test Equipment</a></li>
                    <li><a href="#">Electrical Calibration</a></li>
                    <li><a href="#">Flow Calibration</a></li>
                    <li><a href="#">Pressure Calibration</a></li>
                    <li><a href="#">Process Calibration Tools</a></li>
                    <li><a href="#">RF Calibration</a></li>
                    <li><a href="#">Temperature Calibration</a></li>
                </ul>
              </div>
                
            <!-- Fluke Industrial Product --> 
                <li data-toggle="collapse" data-target="#fluke-industrial" class="collapsed">
                <img src="assets/images/logo-fluke-industrial-group.jpg" />
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> ADDITEL <span class="arrow"></span></a>-->
                </li>  
                <ul class="sub-menu collapse" id="fluke-industrial">
                    <li><a href="#">Fluke Calibration Group</a></li>
                    <li><a href="#">Battery Analyzers</a></li>
                    <li><a href="#">Clamp Meters</a></li>
                    <li><a href="#">Digital Multimeters</a></li>
                    <li><a href="#">Earth Ground Testers</a></li>
                    <li><a href="#">Electrical Testers</a></li>
                    <li><a href="#">HVAC/IAQ Tools</a></li>
                    <li><a href="#">Infrared Camera</a></li>
                    <li><a href="#">Installation Testers</a></li>
                    <li><a href="#">Insulation Testers</a></li>
                    <li><a href="#">Intrinsically Safe</a></li>
                    <li><a href="#">IR Windows</a></li>
                    <li><a href="#">Laser Distance Meters</a></li>
                    <li><a href="#">Portable Appliance Tester</a></li>
                    <li><a href="#">Portable Oscilloscopes</a></li>
                    <li><a href="#">Power Quality Tools</a></li>
                    <li><a href="#">Process Calibration Tools</a></li>
                    <li><a href="#">Radiation Safety</a></li>
                    <li><a href="#">Temperature-IR/Contact/IR Visual</a></li>
                    <li><a href="#">Vibration and Alignment</a></li>
                </ul>

         
            <!-- Ctrl Product --> 
                <li data-toggle="collapse" data-target="#ctrl" class="collapsed">
                <img src="assets/images/logo-ctrl.jpg"/>
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> ROTRONIC <span class="arrow"></span></a>-->
                </li>  
                <ul class="sub-menu collapse" id="ctrl">
                    <li><a href="#">Ultrasond Detector</a></li>
                    <li><a href="#">Software</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul>

            </ul>
       </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#menu-calibration').hover(function()  {
       $(this).find('.sub-menu').stop(true, true).delay(300).slideDown("slow"); 
    }, function() {
        $(this).find('.sub-menu').stop(true, true).delay(300).slideUp("slow"); 
    });
    
  }); 
</script>

[nalumi77]

ของพี่ทำได้คะ แต่เป็นการเอาเมาส์ไปชีแล้วจะเด้งเมนูมา แต่ถ้าหนูอยากให้มันเป็นเมนูค้างไว้ให้ดูตั้งแต่เปิดเลย แบบในภาพนี้จะต้องใส่  script ยังไงดีคะพี่



ขอบคุณคะ

[infamous]

1. แบบแสดง sub-menu เลย ทุก li parent ไม่ต้องคลิก <-- อันนี้คือประเด็นของความต้องการจริงๆ

โค๊ด:

$('#menu-content ul.sub-menu').removeClass('collapse');

2. การเล่น js หรือ debug js script ผมแนะนำให้ลองเล่นในตัว console ของ chrome นะครับ เล่นง่ายดี
เพราะถ้าสคริปต์ง่ายๆ เราสามารถ debug ได้ก่อนที่จะเขียนจริงครับ

[nalumi77]

ใช้คะพี่ เกือบใช้แล้วคะ แต่หนูอยากให้โชว์แค่ sub menu ของ Product เดียวคะ ดังภาพคะ ตัว sub menu อื่น ยังปิดอยู่ ใช้เมาส์คลิ้ก ค่อยเด้งลงมาให้ดูคะพี่

เช่น หน้าของ #fluke-calibration หนูก็จะตั้ง script ไว้ว่าหน้านี้ โชว์เมนูของ #fluke-calibration
      หน้าของ #rotronic หนูก็จะตั้ง script ไว้ว่าหน้านี้ โชว์เมนูของ #rotronic




   <!-- Menu Product -->
    <div class="col-md-3 col-xs-12">
        <div class="nav-side-menu">
        <div class="menu-list">
            <ul id="menu-content" class="menu-content collapse out">
           
            <!-- Fluke Calibration Product -->
                <li data-toggle="collapse" data-target="#fluke-calibration" class="collapsed">
                <img src="assets/images/logo-fluke-calibration-group.jpg" />
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> ADDITEL <span class="arrow"></span></a>-->
                </li> 
                <ul class="sub-menu collapse" id="fluke-calibration">
                    <li><a href="#">Calibration Software</a></li>
                    <li><a href="#">Data Acquisition and Test Equipment</a></li>
                    <li><a href="#">Electrical Calibration</a></li>
                    <li><a href="#">Flow Calibration</a></li>
                    <li><a href="#">Pressure Calibration</a></li>
                    <li><a href="#">Process Calibration Tools</a></li>
                    <li><a href="#">RF Calibration</a></li>
                    <li><a href="#">Temperature Calibration</a></li>
                </ul>
               
            <!-- Fluke Industrial Product -->
                <li data-toggle="collapse" data-target="#fluke-industrial" class="collapsed">
                <img src="assets/images/logo-fluke-industrial-group.jpg" />
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> ADDITEL <span class="arrow"></span></a>-->
                </li> 
                <ul class="sub-menu collapse" id="fluke-industrial">
                    <li><a href="#">Fluke Calibration Group</a></li>
                    <li><a href="#">Battery Analyzers</a></li>
                    <li><a href="#">Clamp Meters</a></li>
                    <li><a href="#">Digital Multimeters</a></li>
                    <li><a href="#">Earth Ground Testers</a></li>
                    <li><a href="#">Electrical Testers</a></li>
                    <li><a href="#">HVAC/IAQ Tools</a></li>
                    <li><a href="#">Infrared Camera</a></li>
                    <li><a href="#">Installation Testers</a></li>
                    <li><a href="#">Insulation Testers</a></li>
                    <li><a href="#">Intrinsically Safe</a></li>
                    <li><a href="#">IR Windows</a></li>
                    <li><a href="#">Laser Distance Meters</a></li>
                    <li><a href="#">Portable Appliance Tester</a></li>
                    <li><a href="#">Portable Oscilloscopes</a></li>
                    <li><a href="#">Power Quality Tools</a></li>
                    <li><a href="#">Process Calibration Tools</a></li>
                    <li><a href="#">Radiation Safety</a></li>
                    <li><a href="#">Temperature-IR/Contact/IR Visual</a></li>
                    <li><a href="#">Vibration and Alignment</a></li>
                </ul>

            <!-- Additel Product -->
                <li data-toggle="collapse" data-target="#additel" class="collapsed">
                <img src="assets/images/logo-additel.jpg" />
                </li>
                <ul class="sub-menu collapse" id="additel">
                    <li><a href="#">Pressure Gauges</a></li>
                    <li><a href="#">Pressure Modules</a></li>
                    <li><a href="#">Pressure Pumps</a></li>
                    <li><a href="#">Multifunction Process Calibrators</a></li>
                    <li><a href="#">Pressure Controllers</a></li>
                    <li><a href="#">Accessories</a></li>
                    <li><a href="#">Software</a></li>
                </ul>

            <!-- Rotronic Product -->
                <li data-toggle="collapse" data-target="#rotronic" class="collapsed">
                <img src="assets/images/logo-rotronic.jpg"/>
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> ACCUMAC <span class="arrow"></span></a>-->
                </li> 
                <ul class="sub-menu collapse" id="service">
                    <li><a href="#">Temperature</a></li>
                    <li><a href="#">Humidy</a></li>
                    <li><a href="#">Dewpoint</a></li>
                    <li><a href="#">Differential Pressure</a></li>
                    <li><a href="#">Pressure</a></li>
                    <li><a href="#">Flow</a></li>
                    <li><a href="#">Co2</a></li>
                    <li><a href="#">Wateractivity</a></li>
                    <li><a href="#">Meteorology</a></li>
                    <li><a href="#">Cleanrooms</a></li>
                    <li><a href="#">ATEX164-167</a></li>
                    <li><a href="#">TRANSMITTER</a></li>
                    <li><a href="#">DATA LOGGERS</a></li>
                    <li><a href="#">HANDHELD INSTRUMENTS</a></li>
                    <li><a href="#">ACCESSORIES</a></li>
                    <li><a href="#">SOFTWARE</a></li>
                    <li><a href="#">WATER ACTIVITY</a></li>
                    <li><a href="#">CALIBRATION</a></li>
                    <li><a href="#">PROBE & FILTER</a></li>
                </ul>

            <!-- ACCUMAC Product -->
                <li data-toggle="collapse" data-target="#accumac" class="collapsed">
                <img src="assets/images/logo-accumac.jpg" />
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> FLUKE <span class="arrow"></span></a>-->
                </li> 
                <ul class="sub-menu collapse" id="accumac">
                    <li><a href="#">Probe</a></li>
                    <li><a href="#">Reading</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul>

            <!-- Ctrl Product -->
                <li data-toggle="collapse" data-target="#ctrl" class="collapsed">
                <img src="assets/images/logo-ctrl.jpg"/>
                  <!--<a href="#"><i class="fa fa-globe fa-lg"></i> ROTRONIC <span class="arrow"></span></a>-->
                </li> 
                <ul class="sub-menu collapse" id="ctrl">
                    <li><a href="#">Ultrasond Detector</a></li>
                    <li><a href="#">Software</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul>

            </ul>
      </div>
      </div>

    </div>
   <!-- End Menu Product -->


 

[nalumi77]

อยากใช้ id ที่เป็นสีแดง ไว้เป็นตัวแปร ว่าให้โชว์ sub menu ในหน้าที่ต้องการคะพี่