nav menu ไม่เป็น responsive จะทำให้เป็น responsive ทำยังไงครับ

ถามตอบ ปัญหาการพัฒนา Extension ไม่ว่าจะเป็น Module plugin Component หรือ แม้แต่ template การปรับแต่งโค้ด Joomla ต่างๆ ทุกเวอร์ชั่น 1.5 2.5 หรือ 3.x

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Before Dong
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 927
ลงทะเบียนเมื่อ: 26/06/2017 10:11 am

nav menu ไม่เป็น responsive จะทำให้เป็น responsive ทำยังไงครับ

โพสต์โดย Before Dong » 22/07/2017 4:16 pm

จาก nav menu ในภาพแรก พอย่อขนาดหน้าจอ แล้ว nav menu ไม่เป็น responsive อะครับ
รูปภาพ

ภาพตอนลดขนาด
รูปภาพ

CODE HTML

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
   <link rel="stylesheet" href="user.css" />
   <meta name=viewport content="width=device-width, initial-scale=1">
   <jdoc:include type="head" />
</head>
<body id="page_bg">      
      <div class="container" id="con-border-logo">
            <div class="container">
               <div class="col-sm-10" id="center_div_top" > <jdoc:include type="modules" name="top" style="xhtml"/> </div>
            </div>
      
               <h4>LOGOHERE</h4>
            <div class="container" >
               <div class="col-md-12">
                  <div  id="center_div">
                  <jdoc:include type="modules" name="user3" style="xhtml"/>
                   </div>
                  
               </div>
            </div>   
               <div class="container">
                  <div class="span12"></div>
               </div>            
      </div>
      
      <div class="container" id="con-border">

         <div class="container" id="div_bread">
            <div class="span12">  <jdoc:include type="modules" name="breadcrumb" style="xhtml"/> </div>
         </div>
         
         
         <div class="container" id="maincontent">
             


              <div class="span12" >
                    <div >
                      <jdoc:include type="modules" name="left" style="xhtml"/>
                       <jdoc:include type="message" />
                       <jdoc:include type="component" />
                   </div>
              </div>

          </div>
         
         <div class="container" id="div_right">
            <div class="span12" ><jdoc:include type="modules" name="right" style="xhtml"/></div>
         </div>
         
         
         
            <div class="container" >
               <div class="col-md-12" id="div_foot">
                  <jdoc:include type="modules" name="footer" style="xhtml"/>
               </div>
            </div>      
      
      </div>
      
      
      
      <div class="footer">
         <jdoc:include type="modules" name="debug" style="xhtml"/>
      </div>
      
</body>
</html>


CSS

โค้ด: เลือกทั้งหมด

#con-border-logo{
margin-top:25px;
height:90px;
background: linear-gradient(#f5f5f5, #ebebeb); /* Standard syntax */
border-radius:10px 10px 0px 0px;
padding-top: 25px;
border-color: white;
border-width: 5px;
border-style: solid;
}
#con-border{
margin-top:5px;
background: linear-gradient(#f5f5f5, #ebebeb); /* Standard syntax */
padding-top: 5px;
border-color: white;
border-width: 5px;
border-style: solid;
border-radius:0px 0px 10px 10px;
margin-bottom:30px;
}
#col-right{
float: center;
}

#center_div{
padding-top: 40px;
display: flex;
justify-content: center;

}



.li-color{
display:block;

}

#center_div_top{
display: flex;

}

#div_foot{

}


#page_bg{
    background: #0C3A6D
}
#div_content{
margin-top:300px;
}



ul.nav {
    border-radius:5px;
    background-color:white;

}

div#maindivider{
    margin-bottom: 10px;
    overflow: hidden;
}

#maincontent{
 border-style: solid;
 border-color: #ebebeb;
 background:white;
  border-width: 1px;
}

#maincontent> .span12{
 margin-left:0px;
}

div.moduletable {

}


ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 9519
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

Re: nav menu ไม่เป็น responsive จะทำให้เป็น responsive ทำยังไงครับ

โพสต์โดย thatsawan » 22/07/2017 4:45 pm

ดูจาก code เเล้วน่าจะเป็น bootstrap เเต่ไม่ทราบเวอร์ชั่น
ถ้าเวอร์ชั่น ล่าสุดสามารถศึกษาได้จาก
https://getbootstrap.com/examples/navbar/
https://bootsnipp.com/snippets/featured ... bar-search


ถ้าไม่่ใช้ bootstrap
ลองดู http://cssmenumaker.com/menu/responsive ... pdown-menu
กด ดาวน์โหลด code มาได่้เลย

ภาพประจำตัวสมาชิก
Before Dong
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 927
ลงทะเบียนเมื่อ: 26/06/2017 10:11 am

Re: nav menu ไม่เป็น responsive จะทำให้เป็น responsive ทำยังไงครับ

โพสต์โดย Before Dong » 22/07/2017 6:53 pm

ได้แล้วครับ โดยการ เอา Code

โค้ด: เลือกทั้งหมด

<nav class="navigation" role="navigation">
                        <div class="navbar pull-left">
                            <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>
                        </div>
                        <div class="nav-collapse">
                            <jdoc:include type="modules" name="user3" style="xhtml"/>
                        </div>
                    </nav>

ไปครอบ

โค้ด: เลือกทั้งหมด

<jdoc:include type="modules" name="user3" style="xhtml"/>


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน