1. дома
  2. Вопрос и ответ
  3. Как удалить прокрутки sidenav

Как удалить прокрутки sidenav

2016-04-11 4 views
0

Как удалить прокрутки sidenav

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/> 
 

 
<nav class="w3-sidenav w3-collapse w3-white w3-card-2 w3-animate-left" style="width:200px;"> 
 
    <a href="javascript:void(0)" onclick="w3_close()" 
 
    class="w3-closenav w3-large w3-hide-large">Close &times;</a> 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t \t \t \t 
 
</nav> 
 

 
<div class="w3-main" style="margin-left:200px"> 
 
<header class="w3-container w3-teal"> 
 
    <span class="w3-opennav w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</span> 
 
    <h2>Responsive Sidenav</h2> 
 
</header> 
 

 
<div class="w3-container"> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
</div> 
 

 
<footer class="w3-container w3-teal"> 
 
    <h5>Footer</h5> 
 
    <p>Footer information goes here</p> 
 
</footer> 
 
     
 
</div> 
 

 
<script> 
 
function w3_open() { 
 
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block"; 
 
} 
 
function w3_close() { 
 
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none"; 
 
} 
 
</script>

How To Remove Scroll Sidenav

Как удалить Свиток в Sidenav? Я использую w3.css, и я хочу иметь sidenav, как w3school. свиток в сиденаве был виден, когда моя мышь не в области. но когда я перетаскиваю мышь в sidenav, он показывает свиток, и я могу прокрутить его вниз. я попытался сделать переполнение: скрытый, переполненный: видимый, но не работает. спасибо. http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidenav_hide&stacked=h

источник

2016-04-11 Karl Friedchicken

+2

КОД? Я не вижу никакого кода ... понимаете? lol/use 'overflow: hidden' – Pedram

+0

предоставляют скрипку или фрагмент. –

+0

@pedram, когда я использую это, чтобы удалить прокрутку, но я не могу прокрутить вниз до –

ответ

0

Имейте в виду, что .w3-sidenav имеет position: fixed!important;, вам сначала нужно будет удалить эту деталь.

источник

2016-04-11 06:47:40 Danko

0

Добавить «overfow: hidden» навигация.

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/> 
 

 
<nav class="w3-sidenav w3-collapse w3-white w3-card-2 w3-animate-left" style="width:200px;overflow:hidden"> 
 
    <a href="javascript:void(0)" onclick="w3_close()" 
 
    class="w3-closenav w3-large w3-hide-large">Close &times;</a> 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t 
 
    <a href="#">Link 1</a> \t \t 
 
    <a href="#">Link 2</a> \t \t 
 
    <a href="#">Link 3</a> \t \t 
 
    <a href="#">Link 4</a> \t \t 
 
    <a href="#">Link 5</a> \t \t \t \t \t 
 
</nav> 
 

 
<div class="w3-main" style="margin-left:200px"> 
 
<header class="w3-container w3-teal"> 
 
    <span class="w3-opennav w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</span> 
 
    <h2>Responsive Sidenav</h2> 
 
</header> 
 

 
<div class="w3-container"> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
    <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p> 
 
    <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p> 
 
    <p><b>Resize the browser window to understand how it works.</b></p> 
 
</div> 
 

 
<footer class="w3-container w3-teal"> 
 
    <h5>Footer</h5> 
 
    <p>Footer information goes here</p> 
 
</footer> 
 
     
 
</div> 
 

 
<script> 
 
function w3_open() { 
 
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block"; 
 
} 
 
function w3_close() { 
 
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none"; 
 
} 
 
</script>

источник

2016-04-11 06:47:44

1

вам нужно изменить в CSS, как показано ниже.

.w3-sidenav { 
     background-color: #ffffff; 
     float: left; 
     height: 100%; 
     overflow: auto; 
     position: relative !important; 
     width: 30%; 
     z-index: 1; 
    } 
    .w3-main { 
     float: left; 
     margin-left: 0 !important; 
     width: 70%; 
    }

источник

2016-04-11 06:52:20 Jainam

Смежные вопросы

 Смежные вопросы