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

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

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

Before Dong
PHP VIP Members
PHP VIP Members
Posts: 1570
Joined: 26/06/2017 10:11 am

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

Post by Before Dong » 22/07/2017 4:16 pm

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

ภาพตอนลดขนาด
Image

CODE HTML

Code: Select all

<!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

Code: Select all

#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
Posts: 19916
Joined: 31/03/2014 10:02 am
Contact:

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

Post by 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 VIP Members
PHP VIP Members
Posts: 1570
Joined: 26/06/2017 10:11 am

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

Post by Before Dong » 22/07/2017 6:53 pm

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

Code: Select all

<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>
ไปครอบ

Code: Select all

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

Post Reply

Return to “Joomla Development”

Users browsing this forum: Baidu [Spider] and 3 guests