セマンティックUIを使用したフルスクリーンマップ

私はセマンティックUIサイドバーとフルスクリーンマップを表示しようとしています。セマンティックUIを使用したフルスクリーンマップ

私はマップイベントを作成してサイドバーを切り替える予定です。私の問題はCSSにあります。

私はすべてを期待通りに表示できますが、メニューの最初の項目を常に表示しています。

これは、関連するHTML構造である：

body { 
background-color: #FFFFFF; 
display: flex; 
height: 100vh; 
flex-direction: column; 
} 

#map { 
    height: 100vh; 
    width: 100%; 
}

これは、ページのロードとして、行動、そして後にする方法の例：ここでは

<body> 
<div class="ui sidebar vertical menu"> 
    <a class="item"> 
     Item 1 
    </a> 
    <a class="item"> 
     Item 2 
    </a> 
    <a class="item"> 
     Item 3 
    </a> 
</div> 

<div class="pusher"> 
    <div id="map"></div> 
</div> 

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 
<script type="text/javascript" src="bower_components/semantic/dist/semantic.min.js"></script> 
<script type="text/javascript" src="bower_components/leaflet/dist/leaflet.js"></script> 
<script> 
    var map = L.map('map').setView([51.505, -0.09], 13); 
    $('.ui.sidebar').sidebar('toggle'); 
</script> 
</body>

は、私がCSSに行った変更がありますトグル：

出典

2016-09-22 George Silva

-1

この

<body> 
 
    
 
<style> 
 
    .unstyle{ 
 
    background: rgba(0,0,0,.0)!important; 
 
} 
 
</style> 
 

 
<div id="topbar" style="width: 100%; height: 37px;" class=""> 
 
    <button id="btn"> toggle</button> 
 
    <button style="float: right"> toggle</button> 
 
</div> 
 
<div id="app" class="" style="height: 94%; width: 100%"> 
 
    <div class="ui left vertical menu sidebar unstyle"></div> 
 
    <div class="pusher" style="height: 100%; width: 100%;"> 
 
    <div id="mapid" style="height: 100%; width: 100%; position: relative;"> </div> 
 
    </div> 
 
    <script> 
 
    $('#app .ui.sidebar') 
 
    .sidebar({context: $('#app')}) 
 
    .sidebar('setting','transition', 'overlay') 
 
    .sidebar('setting','dimPage', false) 
 
    .sidebar('setting','closable', false) 
 
    .sidebar('attach events', '#btn') 
 
    .sidebar('toggle'); 
 
    </script> 
 
</div> 
 

 
</body>

result screenshot

を試してみてください

出典

2017-06-08 21:58:01 user5786721

セマンティックUIを使用したフルスクリーンマップ

答えて

関連する問題