আমি ড্রপডাউন মেনুতে টুইটার বুটস্ট্র্যাপ সাবমেনু তৈরি করার চেষ্টা করছিলাম, তবে আমার একটি সমস্যা হয়েছে: আমার পৃষ্ঠার উপরের ডানদিকে কোণায় ড্রপডাউন মেনু রয়েছে এবং সেই মেনুতে আরও একটি সাবমেনু রয়েছে। যাইহোক, সাবমেনু খুললে - এটি উইন্ডোতে ফিট করে না এবং ডানদিকে খুব বেশি যায়, যাতে ব্যবহারকারী কেবল প্রথম অক্ষর দেখতে পান। ডানদিকে নয়, বাম দিকে কীভাবে সেই সাবমেনু তৈরি করবেন?
.pull-rightকরুন .dropdown।
উত্তর:
সবচেয়ে সহজ উপায়টি হল pull-leftআপনার ক্লাসটি যুক্ত করাdropdown-submenu
<li class="dropdown-submenu pull-left">
jsfiddle: ডেমো
যদি আমি এই অধিকারটি বুঝতে পারি তবে বুটস্ট্র্যাপ কেবল এই ক্ষেত্রে একটি সিএসএস ক্লাস সরবরাহ করে। মেনুতে 'উল' তে 'টান-ডান' যুক্ত করুন:
<ul class="dropdown-menu pull-right">
.. এবং শেষ ফলাফলটি হ'ল যে মেনু অপশনগুলি ডানদিকে সামঞ্জস্য হয়, বোতামের সাথে তারা নীচে নেমে আসে।
pull-rightএটি অর্জনের জন্য ক্লাস ব্যবহার করেন ।
কুরেন্ট ক্লাস .dropdown-submenu > .dropdown-menuআছে left: 100%;। সুতরাং, আপনি যদি বাম দিকে সাবমেনু খুলতে চান তবে সেই সেটিংসটিকে নেতিবাচক বাম অবস্থানে ওভাররাইড করুন। উদাহরণস্বরূপ left: -95%;। এখন আপনি বাম দিকে সাবমেনু পাবেন, এবং নিখুঁত প্রাকদর্শন পেতে আপনি অন্যান্য সেটিংস টুইচ করতে পারেন।
এখানে ডেমো
সম্পাদনা: ওপির প্রশ্ন এবং আমার উত্তর আগস্ট ২০১২ থেকে from তারপরে আমার উত্তরটি সঠিক ছিল। এখন আপনাকে ম্যানুয়ালি সিএসএস স্থাপন করতে হবে না, আপনার কাছে। পুল-বাম শ্রেণি রয়েছে।
সম্পাদনা 2: ডেমোগুলি কাজ করছে না, কারণ বুটস্ট্র্যাপ তাদের URL গুলি পরিবর্তন করেছে's জাস্টফিলিতে কেবল বাহ্যিক সংস্থানগুলি পরিবর্তন করুন এবং তাদেরকে নতুন দিয়ে প্রতিস্থাপন করুন।
left: -90%;(অন্যভাবেই আমি আমার মাউসটিকে সেই সাবমেনুতে স্থানান্তর করতে পারি না, কারণ এটি অদৃশ্য হয়ে যায়)।
আপনি যদি বুটস্ট্র্যাপ ভি 4 ব্যবহার করছেন তবে এটি করার একটি নতুন উপায় আছে।
.dropdown-menu-rightআপনার .dropdown-menuউপাদানটি ব্যবহার করা উচিত ।
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
কোডের লিঙ্ক: https://getbootstrap.com/docs/4.0/components/DPdowns/#menu-items
dropleftএবং droprightউত্তরের প্রসঙ্গটি সঠিক। ধন্যবাদ!
কাজটি করার সঠিক উপায় হ'ল:
/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }
.dropdown-submenu { position: relative; text-align:right; }যখন বাম দিকে তীর থাকে তখন পাঠ্যের ডানদিকে অবস্থান করতে।
আমি একটি জাভাস্ক্রিপ্ট ফাংশন তৈরি করেছি যা দেখে মনে হচ্ছে ডানদিকে তার যথেষ্ট জায়গা আছে কিনা। যদি এটি থাকে তবে সে এটি ডানদিকে প্রদর্শন করবে, অন্যথায় সে এটি বাম দিকে প্রদর্শন করবে
পরীক্ষিত:
জাভাস্ক্রিপ্ট:
$(document).ready(function(){
//little fix for the poisition.
var newPos = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
$(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });
$(".fixed-menu .dropdown-submenu").mouseover(function() {
var submenuPos = $(this).offset().left + 325;
var windowPos = $(window).width();
var oldPos = $(this).offset().left + $(this).width();
var newPos = $(this).offset().left - $(this).width();
if( submenuPos > windowPos ){
$(this).find('ul').offset({ "left": newPos });
} else {
$(this).find('ul').offset({ "left": oldPos });
}
});
});
কারণ আমি প্রতিটি মেনু আইটেমগুলিতে এই ফিক্সটি যুক্ত করতে চাই না এটিতে আমি একটি নতুন ক্লাস তৈরি করেছি। উল-এ ফিক্সড মেনু রাখুন:
<ul class="dropdown-menu fixed-menu">
আমি আশা করি এটি আপনার জন্য কার্যকর হয়েছে।
পুনশ্চ. সাফারি এবং ক্রোমগুলিতে ছোট্ট বাগ, প্রথমে হোভারটি এটিকে বাঁদিকে রেখে দিবে যদি আমি এটি ঠিক করে রাখি তবে এই পোস্টটি আপডেট করবে।
আসলে - আপনি ভাসমান ঠিক মনে হয় dropdownমোড়কের - আমি এটি হিসাবে সহজ হিসাবে যুক্ত হতে পাওয়া করেছি navbar-rightকরতে dropdown।
এটি প্রতারণার মতো বলে মনে হচ্ছে, যেহেতু এটি কোনও নাবারে নেই, তবে এটি আমার পক্ষে ভাল কাজ করে।
<div class="dropdown navbar-right">
...
</div>
এরপরে আপনি pull-leftসরাসরি dropdown... এর সাথে ভাসমানটিকে আরও কাস্টমাইজ করতে পারেন ...
<div class="dropdown pull-left navbar-right">
...
</div>
... বা তার চারপাশে মোড়ক হিসাবে ...
<div class="pull-left">
<div class="dropdown navbar-right">
...
</div>
</div>
আপনি যদি কম সিএসএস ব্যবহার করে থাকেন তবে সংযোগকারী তীরের সাথে ড্রপডাউনটি সরাতে আমি একটি সামান্য মিশ্রিন লিখেছিলাম:
.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) { // mixin to shift the dropdown menu
left: @num-pixels;
&:before { left: -@num-pixels + @arrow-position; } // triangle outline
&:after { left: -@num-pixels + @arrow-position + 1px; } // triangle internal
}
তারপরে উদাহরণস্বরূপ .dropdown-menuএকটি আইডি সহ একটি স্থানান্তরিত dropdown-menu-xকরতে, আপনি এটি করতে পারেন:
#dropdown-menu-x {
.dropdown-menu-shift( -100px );
}
আমি একটি জাভাস্ক্রিপ্ট ফাংশন তৈরি করেছি যা দেখে মনে হচ্ছে ডানদিকে তার যথেষ্ট জায়গা আছে কিনা। যদি এটি থাকে তবে সে এটি ডানদিকে প্রদর্শন করবে, অন্যথায় সে এটি বাম দিকে প্রদর্শন করবে। আবার যদি এর ডানদিকে পর্যাপ্ত জায়গা থাকে তবে এটি ডান দিকটি দেখায়। এটি একটি লুপ ...
$(document).ready(function () {
$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');
if (screenWidth > 767) {
$(".dropdown-submenu").hover(function () {
var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
var newPosition = $(this).offset().left - $(this).find('ul').width();
var windowPosition = $(window).width();
var oldPosition = $(this).offset().left + $(this).width();
//document.title = dropdownPosition;
if (dropdownPosition > windowPosition) {
$(this).find('ul').offset({ "left": newPosition });
} else {
$(this).find('ul').offset({ "left": oldPosition });
}
});
}
});
আপনি কি বুটস্ট্র্যাপের সর্বশেষতম সংস্করণটি ব্যবহার করছেন? আমি নীচের চিত্রের মতো ফ্লুয়েড লেআউট উদাহরণ থেকে এইচটিএমএলকে রূপান্তর করেছি । আমি একটি ড্রপ ডাউন যুক্ত করেছি এবং pull-rightক্লাসটি যুক্ত করে ডানদিকে রেখেছি । ড্রপ ডাউন মেনুতে ঘোরাফেরা করার সময় এটি স্বয়ংক্রিয়ভাবে বাম দিকে টানা হয় এবং কিছুই লুকানো থাকে না - সমস্ত মেনু পাঠ্য দৃশ্যমান। আমি কোনও কাস্টম সিএসএস ব্যবহার করি নি।
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>