次のリンクは、招待講演者の詳細を提供する私のページの 1 つです。
http://iclaa2017.com/slide-show-test/#tab4
すべて問題ありませんが、リンク (スピーカー 1,2...) をクリックすると、トグル効果が得られますが、スピーカー 1,2.. バーがナビゲーション バーについています。ページジャンプとして機能するために発生していることを理解しています。しかし...
修正方法は？ドロップダウンボックスにテキストを合わせる方法は？
スピーカー 1、2 が必要です... また、ドロップダウン ボックスを使用する必要があります。
私が使用したコードは次のとおりです。
.maindrop {
width: 49%;
}
.bar {
padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
transition: .2s ease-out;
margin-bottom: .1cm;
}
.bar:hover {
background: gray;
}
.dropbox {
max-height: 0;
transition: .5s ease-out;
overflow: hidden;
width: 100%;
}
.dropbox:target {
max-height: 300px;
}<head>
</head>
<body>
<div style="width: 100%">
<div class="maindrop" style="float: left">
<div class="fold default"> <a class="bar" href="#tab1">Speaker 1</a>
<div class="dropbox" id='tab1'>
<div style="width: 30%; float: left;"> <img src="http://sau.int/~ctgtc2016/images/RB_Bapat.jpeg" alt="" > </div>
<div style="width: 70%; float: left; text-align: justify;"> The main areas of research interest of Prof. Bapat are nonnegative matrices,
matrix inequalities, matrices in graph theory and generalized inverses.
He has published more than 100 research papers in these areas in reputed
national and international journals and guided three Ph.D. students. He
has written books on Linear Algebra, published by Hindustan Book Agency,
Springer and Cambridge University Press. He wrote a book on Mathematics
for the general reader, in Marathi, which won the state government award
for best literature in Science for 2004.
Prof. Bapat has been on the editorial boards of Linear and Multilinear
Algebra, Electronic Journal of Linear Algebra, India Journal of Pure and
Applied Mathematics and Kerala Mathematical Association Bulletin. He
has been elected Fellow of the Indian Academy of Sciences, Bangalore and
Indian National Science Academy, Delhi.
Prof. Bapat served as President of the Indian Mathematical Society during
its centennial year 2007-2008. For the past several years he has been
actively involved with the Mathematics Olympiad Program in India and
served as the National Coordinator for the Program. Prof. Bapat served as
Head, ISI Delhi Centre, during 2007-2011. He was awarded the J.C. Bose
fellowship in 2009. </div>
</div>
</div>
<div class="fold"> <a class="bar" href="#tab2"> Speaker 2</a>
<div class="dropbox" id='tab2'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab3"> Speaker 3</a>
<div class="dropbox" id='tab3'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab4"> Speaker 4</a>
<div class="dropbox" id='tab4'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
</div>
<div class="maindrop" style="float: right">
<div class="fold default"> <a class="bar" href="#tab5">Speaker 5</a>
<div class="dropbox" id='tab5'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab6"> Speaker 6</a>
<div class="dropbox" id='tab6'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab7"> Speaker 7</a>
<div class="dropbox" id='tab7'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab8"> Speaker 8</a>
<div class="dropbox" id='tab8'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
</div>
</div>
</body>