مشکل در ایجاد منو در بوت استرپ

[پیام حیاتی]

سلام عزیزان
می خوام یک منو مثل شکل زیر ایجاد کنم :

139483

در بوت استرپ کد زیر رو قرار دادم :


<div class="container">
<nav class="navbar navbar-inverse" style="text-align:center">
<ul class="nav nav-pills">

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

با مثال های موجود در نت نتونستم به شکل تصویر در بیارم.
تشکر.

[پیام حیاتی]

من منو رو ایجاد کردم فقط هر کاری می کنم راستچین نمیشه:


<!-- Start Menu -->
<div class="container rtol">
<div class="menu">
<nav class="navbar navbar-inverse rtol">


<div class="collapse navbar-collapse rtol" id="myNavbar" >
<ul class="nav navbar-nav rtol ">
<li class="active"><a href="index.html">صفحه اصلی</a></li>
<li><a href="#">گالری تصاویر</a></li>
<li><a href="#">نگاهی به اخبار</a></li>
<li><a href="contact.html">تماس با من</a></li>
</ul>
</div>
</nav>
</div>
</div>
<!-- End Menu -->

rtol کلاسی هست کدهای راستچین کردن در آن قرار دارد:


.rtol
{
direction:rtl;
text-align:right;
}

[anvar]

کلاس rtol رو کلا پاک کن

به تگ div که الان id یش myNavbar است خاصیت زیر رو اضافه کن
float: right;

بعد در داخل فایل css بوت استریپ دنبال قاعده زیر بگرد و مقدار left رو به right ست کن
.navbar-nav>li

یعنی باید بصورت زیر بشه
.navbar-nav>li {
float: right;
}

[anvar]

برای ساختار کلی منو طبق تصویر مورد نظر از مثال زیر استفاده کن

http://cssmenumaker.com/menu/tabbed-menu

[پیام حیاتی]

تشکر ، ولی الآن که سایز را تغییر می دم آیتم های منو محو می شوند!
در حالت عادی :

139502

کوچک شدن صفحه :

139503

در واقع دکمه ای که عناصر در آن قرار بگیرد نمایش داده نمی شود ، مانند :

139504

در لینکی که معرفی شد نیز این مشکل وجود دارد:

139505

کدها :


<!-- Start Menu -->
<div class="container">
<div class="menu">
<nav class="navbar navbar-inverse">


<div class="collapse navbar-collapse" style="float:right" id="myNavbar" >
<ul class="nav navbar-nav">
<li><a href="contact.html">تماس با من</a></li>
<li><a href="#">گالری تصاویر</a></li>
<li><a href="#">نگاهی به اخبار</a></li>

<li class="active"><a href="index.html">صفحه اصلی</a></li>
</ul>
</div>
</nav>
</div>
</div>
<!-- End Menu -->

[anvar]

این مشکل کاملا قابل انتظاره - برای نمایش اون دکمه باید کدی براش بذارید تا نشون داده بشه. به خودی خود همچنین دکمه ای نشون داده نمیشه
بهتره مثال های خود بوت استراپ رو چک کنید - سورس صفحه رو ملاحضه بفرمائید تا با کدهای استاندارد آشنا بشید
http://getbootstrap.com/examples/starter-template/

در نهایت کد شما به شکل زیر میشه
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" style="float:right" id="myNavbar" >
<ul class="nav navbar-nav">
<li><a href="contact.html">تماس با من</a></li>
<li><a href="#">گالری تصاویر</a></li>
<li><a href="#">نگاهی به اخبار</a></li>

<li class="active"><a href="index.html">صفحه اصلی</a></li>
</ul>
</div>
</nav>
</div>

در واقع باید این قسمت رو برای دکمه مورد نظر به بالای nav اضافه کنید
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
در ضمن یه کلاسی در css بوت استراپ برای راست چین کردن منوها هست بنام navbar-right که باید به تگ nav اضافه اش کنی

[پیام حیاتی]

ممنون ، الآن دکمه اضافه شده اما با کلیک بر روی آن اتفاقی نمی افتد؟!(آیتم های منو را نمایش نمی دهد).

[پیام حیاتی]

این کدها رو در قسمت head لینک کردم ، کسری ندارند؟!


<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>

[mohammad425]

اینجوری بنویسین:



<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>



فایل های جاوا اسکریپت رو قبل از body بزارین استانداردتره

[پیام حیاتی]

ممنون مشکل در گروه بوت استرپ در تلگرام به کمک دوستان حل شد ، با وجود همچین گروه هایی در آینده نزدیک انجمن ها کارآیی خودشون رو از دست خواهند داد.